Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use clipboard.js for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

(1) introduction:

Clipboard.js is a lightweight JavaScript plug-in that copies text to the clipboard. Through this plug-in, you can copy the input box, text field, text in DIV elements and other text content to the clipboard.

Clipboard.js supports mainstream browsers: chrome 42; Firefox 41; IE 9; opera 29; Safari 10 +

(2) the ways for clipboard to copy content are

Copy the target content from target

The content to be copied through function

Return the copied content through the property

Target copy the target content, not here, just talk about the operation of function and attributes.

(3) there are two kinds of Function operations:

The first kind:

Copy the content through target's function

Specify the node to be copied through target, where the comfort value returned is' hello'

Copy_target hello var clipboard = new Clipboard ('.btn', {/ / specify the node to be copied via target target: function () {return document.querySelector ('div');}}); clipboard.on (' success', function (e) {console.log (e);}) Clipboard.on ('error', function (e) {console.log (e);})

The second kind:

Copy the content through text's function

The copy content specified by the function of text, which returns'to be or not to be''

Copy var clipboard = new Clipboard ('.btn', {/ / Click the copy button to return the copied content directly via text text: function () {return'to be or not to be';}}); clipboard.on ('success', function (e) {console.log (e);}); clipboard.on (' error', function (e) {console.log (e)) }); (4) return the copied content through the attribute

The first kind: single node

Specify the node object through id and pass it as a parameter to Clipboard. The content of the return value here is the content of data-clipboard-text

/ / obtain the contents of copied data-clipboard-text through id Copy var btn = document.getElementById ('btn'); var clipboard = new Clipboard (btn); clipboard.on (' success', function (e) {console.log (e);}); clipboard.on ('error', function (e) {console.log (e);})

The second kind: multi-node

Get all the button buttons through class and pass them to Clipboard as parameters. When each button is clicked, the content of the return value is the content of its corresponding data-clipboard-text, which is 1mem2jue 3 respectively.

/ / register multiple button through class to get the value of data-clipboard-text Copy var clipboard = new Clipboard ('.btn'); clipboard.on ('success', function (e) {console.log (e);}); clipboard.on (' error', function (e) {console.log (e);}); (5) compatibility of functions and attributes

Function:

/ / ClipboardJS.isSupported () /-this sentence is: whether it is compatible with var clipboard = new Clipboard ('.btn'); / / graceful demotion: safari version number > = 10 indicates that the copy is successful; otherwise, after the text is selected, manually select "copy" to copy clipboard.on ('success', function (e) {alert (' copy successful!') E.clearSelection (); clipboard.on ('error', function (e) {alert (' Please select "copy" to copy! ") / / try to remove the alert to pop up the" copy "tool of the system, but you need to click the button twice to pop up, the exact reason is not clear, refer to the figure above. Some people say that you can try to write an empty click event where it is triggered, "nclick="because ios does not only support on events})

Attributes:

-copy () {var clipboard = new Clipboard (".email") / / console.log (clipboard); clipboard.on ("success", e = > {/ / console.log ("copy successful", e) Toast ({message: "copy successful"}) / / Free memory clipboard.destroy () clipboard.on ("error") E = > {/ / does not support copying Toast ({message: "Mobile permissions do not support replication"}) console.log ("this browser does not support automatic replication") / / Free memory clipboard.destroy ()})} about "how to use clipboard.js" this article ends here Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.