How to use clipboard.js
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.
