JavaScript sao chép vào Clipboard
Bài đăng này đã không được cập nhật trong 5 năm
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:
- sử dụng CDN
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
- sử dụng npm bằng cách chạy câu lệnh
npm install clipboard --save - sử dụng bower bằng cách chạy câu lệnh
bower install clipboard --save - 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.
- 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">
- 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>
Tài liệu tham khảo
All rights reserved
