clipboard.js is a plug-in that copies text to the clipboard without flash. This article mainly introduces you to the basic usage of clipboard.js. I hope it can help you.
<script src="js/clipboard.min.js"></script>
First you need to instantiate it by passing a DOM selector, HTML element or HTML element list.
new Clipboard('.btn');
1 Use one element as a trigger to copy the text of another element. The data-clipboard-target attribute needs to be followed by the attribute selector
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> </button>
In addition, there are Another attribute, data-clipboard-action attribute, is used to specify whether copy or cut operation is required. The default is copy. The cut operation only works on or
<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>
2 Copy text from the attribute. You don’t need another element as a trigger. You can use the data-clipboard-text attribute and put the text that needs to be copied at the end.
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>
1 Check whether clipboard.js supports Clipboard.isSupported() by running it. If it returns true, it can be used.
2 Show some user feedback or capture the selection after copy/cut operations. Operation, text, trigger element
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
3 This plug-in uses event delegation to trigger, so it greatly reduces operations on the dom.
If you don’t want to modify your HTML, then you can use a very convenient command API. All you need to do is declare a function, write the operation you want, and return a value. Below is an example of returning different values for triggers with different IDs. For specific usage methods, please see https://clipboardjs.com
<body> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button id='foo_1' class="btn" data-clipboard-target="#foo"> </button> </body> <script> new Clipboard('.btn', { text: function(trigger) { if(trigger.getAttribute('id')=='foo_1'){ return 1; }else{ return 2; } } }); </script>
Related recommendations:
clipboard.js uses html pages to copy information to the clipboard
ZeroClipboard.js uses one flash to copy multiple text boxes
Clipboard.js JavaScript copy and paste library without Flash_javascript tips
The above is the detailed content of Share the basic usage of clipboard.js. For more information, please follow other related articles on the PHP Chinese website!