Sao chép văn bản với Clipboard.js

Cập nhật lần cuối vào

Nếu bạn đang muốn tích hợp chức năng cho phép người dùng sao ché hoặc cắt đoạn văn bản khi nhấn chuột vào nút bất kỳ trên trang web thì bạn có thể sử dụng clipboard.js, đây là bộ code miễn phí được viết bằng Javascript. Bạn có thể tích hợp chức năng sao chép này vào các trang web như chia sẻ coupon hoặc code embed trên trang nhạc, trang phim.

Sao chép văn bản với Clipboard.js

Có rất nhiều cách để bạn thực hiện công việc sao chép văn bản khi người dùng nhấn chuột vào đối tượng nào đó, trước đây thì mình hay dùng ZeroClipboard để làm điều này. Tuy nhiên với mã nguồn của ZeroClipboard thì có một nhược điểm là bạn phải cài Adobe Flash cho trình duyệt thì hệ thống mới hoạt động.

Nếu như các phương thức sao chép văn bản trước đây phải cần flash plugin thì nay với clipboard.js bạn đã giải quyết được vấn đề này. Clipboard.js là bộ code mới, được cập nhật thường xuyên với phong cách hiện đại, phù hợp với các trình duyệt web hiện đại bây giờ. Không cần phải cài đặt flash plugin và cách tích hợp sử dụng cũng cực kỳ đơn giản.

Để sử dụng được clipboard.js thì bạn phải tải bộ code này về, sau đó tích hợp vào trang web:

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

Sau khi script đã được chèn vào trang web của bạn, bạn sẽ sử dụng đoạn code HTML như ví dụ bên dưới:

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Cuối cùng là bạn xử lý code javascript để thực thi lệnh:

new Clipboard('.btn');

Như bạn thấy bên trên, cách thực hiện rất đơn giản, ngoài ví dụ này ra thì bạn có thể tham khảo thêm hướng dẫn cài đặt clipboard.js trên trang chủ của họ. Chúc bạn thành công.