JavaScript sao chép vào Clipboard

Sao chép vào clipboard là một chức năng chúng ta sử dụng hàng chục lần mỗi ngày.Trong bài này,mình sẽ hướng dẫn các bạn triển khai khả năng cắt hoặc sao chép dữ liệu vào clipboard của người dùng sử dụng clipboard.js.

Cách cài đặt

Bạn có thể lựa chọn một trong số cách cài đặt sau:

1. sử dụng CDN

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

1. sử dụng npm bằng cách chạy câu lệnh npm install clipboard --save
2. sử dụng bower bằng cách chạy câu lệnh bower install clipboard --save
3. Tài file clipboard.js và import vào project của bạn

Cách sử dụng

Mình cần có 2 phần.

1. Phần thứ nhất chứa nội dung cần sao chép. Vd:

<input id="post-shortlink" value="https://ac.me/qmE_jpnYXFo">

1. Phần thứ 2 sẽ là một nút click để thực hiện sao chép hoặc cắt.

<button class="button" id="copy-button" data-clipboard-target="#post-shortlink">Copy</button>

Sau đó sẽ gọi đến javascript clipboard.js

<script>
  (function(){
    new Clipboard('#copy-button');
  })();
</script>

Chỉ cần thực hiện vai bước trên ta có thể bắt đầu sao chép text một cách dễ dàng. Ta sẽ có kết quả như trong ảnh sau đây:

Handle event

clipboard.js có hỗ trợ event để biết được việc copy text đã thành công hoặc fail. Để handle event đó bạn chỉ cần viết nhau sau:

<script>
  var clipboard = new Clipboard('#copy-button');

  clipboard.on('success', function(e) {
    alert("copy success")
  });

  clipboard.on('error', function(e) {
   alert("copy fail")
  });
</script>