11/08/2018, 19:56

Clipboard.js - thư viện giúp cắt/sao chép nội dung trên web.

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à 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.

Clipboard

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

  • Sử dụng npm

    npm install clipboard --save
    
  • Sử dụng bower

    bower install clipboard --save
    

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.

 
<button id="btn" data-clipboard-text="1">Copy</button>

 
<script src="../dist/clipboard.min.js"></script>

 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
</script>

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

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

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

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

 
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>
  • Bài viết được viết tại blog của mình, mọi người tham khảo thêm một số bài viết ở đây nhé: http://blog.duyetdev.com/2015/10/clipboardjs-thu-vien-giup-cat-sao-chep-noi-dung-tren-web.html
  • 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

Chúc các bạn thành công!

0