How to realize the function of copying text to clipboard with JavaScript and Html5

This article mainly introduces "how to use JavaScript and Html5 to achieve button copy text to the clipboard function" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "how to use JavaScript and Html5 button to copy text to the clipboard function" article can help you solve the problem.

One: introduce plug-ins:

Second, add an attribute to the tag: data-clipboard-text

Copy

Third, define script: implement copy function-(write internal script, external ones always report errors, can't find classes, novices don't understand it, I'll add it later)

Var clipboard = new Clipboard ('btn'); clipboard.on (' success', function (e) {e.clearSelection (); / / replication successful}); clipboard.on ('error', function (e) {/ / replication failed})

Add: new Clipboard ()-any parameter is id class, like id or .class as defined by css

Four: customize the copied content

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

Return the content you want to copy through return

Five: the list page copies each piece of list content

You can give each item custom attribute data-clipboard-text.

Div.setAttribute ("data-clipboard-text", "asdf")

Add: almost all computer browsers can support Android on mobile phones. Apple has some problems and needs to set the tag to button.

This is the end of the content on "how to use JavaScript and Html5 to achieve button copy text to the clipboard function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.