Sử dụng thư viện clipboard js

Trong quá trình làm dự án, đôi khi chúng ta cần thực hiện việc copy text trên màn hình vào clipboard ( giống như khi copy url clone repo của git hub chẳng hạn), với js chúng ta có thể làm bằng nhiều cách, tuy nhiên với thư viện clipboard js, công việc này trở nên đơn giản và rất nhẹ nhàng. Trước hết các bạn cần cài đặt thư viện clipboard js bằng một trong các cách sau: I. Cài đặt thư viện

• Cách 1: Sử dụng npm để tải như sau: npm install clipboard --save
• Cách 2: Đơn giản các bạn có thể tải file min js ở đây https://github.com/zenorocha/clipboard.js/archive/master.zip Ngoài ra sử dụng dist để lấy file từ CDN cũng là 1 cách https://github.com/zenorocha/clipboard.js/archive/master.zip II. Sử dụng để copy và cut đoạn văn bản
• Để copy text từ target element: Trên DOM html bạn có element là target muốn copy, và 1 nút để nhận sự kiện khi copy (gọi là trigger), trên element trigger, bạn thêm attribute data-clipboard-target với selector của target cần copy.

<!-- 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>

Kết quả như sau:

• Để cut text từ 1 target element: Cách làm tương tự như copy, nhưng bạn cần thêm attribute data-clipboard-action="cut" vào trigger.

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

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

Kết quả như sau:

• Trong 1 số trường hợp, bạn không có target copy mà khi nhấn nút, chúng ta copy 1 giá trị nào đó có sẵn, lúc này bạn truyển giá trị đó vào attribute data-clipboard-text như sau:

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

III. Sự kiện Để hỗ trợ việc thông báo cho người dùng đã copy thành công hoặc chưa thành công, clipboard hỗ trợ 2 sự kiện "success" hoặc "error"

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Bạn có thể alert cho người dùng đã copy thành công trong block success và ngược lại.

Trong trường hợp DOM của bạn không cố định, bạn có thể return 1 node bằng cách:

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

Nếu nhận giá trị copy động (get từ API về chẳng hạn), bạn có thể return giá trị text trong hàm như sau:

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('Some thing from API');
    }
});

Trên đây là một số sử dụng cơ bản của thư viện clipboard, các bạn có thể đọc thêm tài liệu và sử dụng hiệu quả hơn tại trang chủ https://clipboardjs.com/ Cảm ơn các bạn đã theo dõi bài viết