search

Home >Web Front-end >JS Tutorial >Share the basic usage of clipboard.js

Share the basic usage of clipboard.js

小云云
小云云Original
2018-03-07 16:13:006384browse

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.

1 Introducing the plug-in 

<script src="js/clipboard.min.js"></script>

2 Basic usage

First you need to instantiate it by passing a DOM selector, HTML element or HTML element list. 

new Clipboard(&#39;.btn&#39;);


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 d5fd7aea971a85678ba271703566ebfd or 4750256ae76b6b9d804861d8f69e79d3 elements. 

<!-- 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&#39;t mean you should — clipboard.js">
    Copy to clipboard
</button>

3 Others Description

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(&#39;.btn&#39;);
    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.

4 Advanced usage

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=&#39;foo_1&#39; class="btn" data-clipboard-target="#foo">
    </button>
</body>
<script>
    new Clipboard(&#39;.btn&#39;, {
        text: function(trigger) {
            if(trigger.getAttribute(&#39;id&#39;)==&#39;foo_1&#39;){
                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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of angularJS time formatting filterNext article：Detailed explanation of angularJS time formatting filter

Related articles

See more