Javascript - How to copy text to clipboard

[quantm (Trần Minh Quân)]

Introduction

Clipboard.js is a Javascript library to copy text content to clipboard

Setup

Via CDN providers

zenorocha/clipboard.js

Via npm package

npm install clipboard --save

##3 Usage
Using HTML5 data atrribute ‘‘data-clipboard-target’’ and ‘‘data-clipboard-action’’

‘‘Copy text’’ - The code below will copy text from textarea to clipboard when event click of button Copy to clipboard is trigger

<textarea id="bar">Text to be copied...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
    Copy to clipboard
</button>

‘‘Cut text’’ - The code below will cut text from textarea to clipboard when event click of button Copy to clipboard is trigger

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

Demo

https://quantmscubism.github.io/clipboard.html

Reference

zenorocha/clipboard.js

Javascript - How to copy text to clipboard

[nhonduyen1 (Duyen)]

Javascript có hỗ trợ phương thức execCommand(“copy”) Demo. Vậy tại sao phải sử dụng thư viện này?

[Vong_Hoang_Tuong (null)]

Ngoài ra còn Clipboard API nữa.
Dùng clipboard.js cũng tốt, thư viện này dùng execCommand('copy') nhưng dễ sử dụng hơn, hỗ trợ data attributes.