Clipboard.js

Clipboard.js là một thư viện vô cùng gọn nhẹ (2kb) giúp bạn dễ dàng cắt hoặc sao chép nội dung trên trang web một cách dễ dàng. Được sử dụng trong các trường hợp bạn muốn người dùng tự động copy dữ liệu vào trong clipboard mà không cần thực hiện thao tác copy hoặc Ctrl + C.

Ưu điểm của Clipboard.js là cực kì nhẹ (2kb) và không sử dụng flash.

Cài đặt

Sử dụng npm

npm install clipboard --save

Sử dụng bower (DEPRECATED - không còn được khuyên dùng)

bower install clipboard --save

Lưu ý: Bower đã bị ngừng phát triển. Nên sử dụng npm hoặc yarn thay thế.

Hoặc bạn có thể download trực tiếp thư viện bằng file ZIP tại đây và sử dụng.

Cách sử dụng

Thêm thư viện vào trang web bằng thẻ script

<!-- 1. Define some markup -->
<button id="btn" data-clipboard-text="1">Copy</button>

<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>

<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
  var btn = document.getElementById('btn')
  var clipboard = new Clipboard(btn)
</script>

Copy nội dung trong trang từ một element khác

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>

Copy nội dung từ thuộc tính

<!-- Trigger -->
<button
  class="btn"
  data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
  Copy to clipboard
</button>

Bạn có thể xem thêm các ví dụ và api từ trang chủ của project tại đây: https://github.com/zenorocha/clipboard.js

2025 Update

Mặc dù bài viết này được viết vào năm 2015, Clipboard.js vẫn còn rất hữu ích trong năm 2025. Tuy nhiên, hãy lưu ý rằng:

• Modern Clipboard API: Hầu hết các trình duyệt hiện đại hỗ trợ native navigator.clipboard API, có thể giải quyết các trường hợp đơn giản mà không cần thư viện
• Clipboard.js vẫn hữu ích: Vẫn được dùng trong các dự án sản xuất vì nó cung cấp xử lý lỗi tốt, hỗ trợ trình duyệt cũ, và API đơn giản hơn
• Kích thước: Hiện tại Clipboard.js có kích thước ~3kb (gzipped), vẫn rất nhẹ
• Bảo trì: Thư viện vẫn được duy trì tích cực