clipboard.js: Sao chép Văn bản vào Clipboard

---

clipboard.js cho phép bạn dễ dàng sao chép văn bản vào clipboard . Với dung lượng 3kb được gzipped và không cần Flash, đó là một cách nhẹ nhàng tuyệt vời để cho phép khách truy cập sao chép các đoạn văn bản và mã trên trang web .

Cài đặt

Cài đặt với npm :

npm install clipboard --save

Hoặc lấy gói từ Github và đặt file clipboard.min.js theo cách thủ công vào folder dự án của bạn.

Sau đó, bao gồm file JavaScript trước thẻ đóng </body>:

<script src="path/to/clipboard.min.js"></script>

Cuối cùng, bạn cần khởi tạo nó. Trong ví dụ JQuery sau, ta đang khởi tạo đối tượng cho tất cả các phần tử bằng một lớp clipboard :

$( document ).ready(function() {
  var clipboard = new Clipboard('.clipboard');
});

Sử dụng

Để sử dụng nó, hãy sử dụng thuộc tính data-clipboard-text data:

<button class="clipboard"
   data-clipboard-text="This will be copied">
  Copy this
</button>

Hoặc sử dụng thuộc tính data-clipboard-target data:

<span id="copy">This text will be copied</span>

Xử lý lỗi

Xử lý các trạng thái thành công và lỗi dễ dàng với các sự kiện tùy chỉnh thành công và lỗi:

$( document ).ready(function() {
  clipboard.on('success', function(e) {
    $(e.trigger).text("Copied!");
    e.clearSelection();
    setTimeout(function() {
      $(e.trigger).text("Copy");
    }, 2500);
  });

Lưu ý : Một số trình duyệt không hỗ trợ API executeCommand cần thiết để clipboard.js hoạt động bình thường. Văn bản sẽ vẫn được chọn, do đó, một giải pháp tốt là hiển thị thông báo yêu cầu user nhấn CTRL+C khi một sự kiện lỗi được kích hoạt.

---

---

Các tin liên quan