How to use JavaScript+Html5 to realize the function of button copying text to clipboard

This article is a detailed introduction to "how to use JavaScript+Html5 to realize the function of button copying text to clipboard". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to use JavaScript+Html5 to realize the function of button copying text to clipboard" can help you solve your doubts. The following is followed by the idea of Xiaobian. Slowly deepen, learn new knowledge together.

1. Introduction of plug-ins:

Two: Add attributes to tags: data-clipboard-text

Copy

III: Definition script: realize copy function

var clipboard = new Keyboard ('btn ');clipboard.on ('success', function(e) {e.clearSelection();//copy succeeded});clipboard.on ('error ', function(e) {//copy failed});

Supplement: new Keyboard ()----Parameter id class can be the same as css definition id or.class

IV: Custom copy content;

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

Return the content you want to copy via return

Five: List Pages Copy the contents of each list

You can customize the attributes data-clipboard-text for each item

div.setAttribute("data-clipboard-text","asdf");

Supplement: almost all computer browsers can support, Android on mobile phones can, Apple has a problem, need to set the label to button

Read here, this article "How to use JavaScript+Html5 to achieve button copy text to the clipboard function" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.