We place a copy button on the web page, which is mainly used to facilitate users to copy complex text such as links. In the past, we relied on Flash through JS, or even relied on the huge js library of jQuery to copy text to the clipboard. . What I want to introduce to you today is a very modern plug-in that does not require flash and does not rely on any other js libraries. It is called clipboard.js.
Operation rendering:
HTML
First load the local clipboard.js file.
<script src="clipboard.min.js"></script>
Then add the text field content to be copied or cut and the button in the body.
<input id="foo" value="http://www.jb51.net/article/73145.htm"> <button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>
Here, we use the data-attribute of HTML5 to locate the copy object target. It points to the text field #foo, indicating that the value content in #foo is copied. The aria-label attribute defines the copy after successful copying. Information, used to prompt copy result information.
There is also an attribute data-clipboard-action, which defines whether the current operation is copy or cut. The default is copy. When data-clipboard-action="cut", clicking the button will cut the text, just like the WORD operation. . Of course, the cut operation only works on text and textarea.
We also do not need the content of elements such as input and textarea as copy objects. We can define the content to be copied on the button through the ata-clipboard-text attribute. Click the button to copy to the content corresponding to ata-clipboard-text.
<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>
Javascript
Add the following code to the
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
