Clipboard.js is a very popular front-end plug-in. Clipboard.js implements pure JavaScript (no Flash) browser content to the system Clipboard function.

1. The clipboard. Js is introduced

Clipboard. js modern copy text, does not rely on Flash, does not rely on other frameworks, gzip compressed only 3KB size.

“Copying text shouldn’t be difficult. There shouldn’t be too much configuration or downloading too many scripts. Most importantly, it shouldn’t rely on Flash or other frameworks and should be kept simple.”

“That’s why and why clipboard.js was created.”

2. The clipboard. The use of js

Two installation modes

  1. Install using the NPM tool

    npm install clipboard –save

  2. Introduced the CDN

use

It’s easy to use

  1. First introduced the clipboard. Js

  2. Sets the content of the copy clipping

Copy content from another element. You can do this by adding a data-clipboard-target attribute to the target element

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <! -- Trigger --><button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>Copy the code

You can also define a data-clipboard-action property to specify whether you want to copy or cut the content

<textarea id="bar">Mussum ipsum cacilds... </textarea> <! -- Trigger --><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>Copy the code

To copy the current content, set a data-clipboard-text attribute to the target element

<button class=" BTN "data-clipboard-text="Just because you can't mean you should -- clipboard.js"> Copy to clipboard</button>Copy the code
  1. The event

If you want to show some user feedback, or get selected text after the user copies/cuts it, here’s an example.

We let you set up listening and implement custom logic by triggering custom events such as SUCCESS and Error

var clipboard = new ClipboardJS('.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); });Copy the code

3. Other usage

If you don’t want to modify HTML, there is a very specific imperative API for you to use. All you need to do is declare a function, do some processing, and return a value.

For example, if you want to set target dynamically, you need to return a node.

new ClipboardJS('.btn', { 
   target: function(trigger) {   
     return trigger.nextElementSibling;  
  }});
Copy the code

If you want to set text dynamically, you need to return a string.

new ClipboardJS('.btn', { 
   text: function(trigger) {    
    return trigger.getAttribute('aria-label'); 
   }});
Copy the code

If used in Bootstrap Modals, or in other libraries that modify focus, you will want to set the element that gets focus to the value of the Container property.

new ClipboardJS('.btn', {  
  container: document.getElementById('modal')
});
Copy the code

Similarly, if you are using a single-page application, you may want to manage the DOM lifecycle more precisely. You can clean up events and create objects.

var clipboard = new ClipboardJS('.btn'); clipboard.destroy();Copy the code

“Thank you for reading. I will share the open source library used in my work in the future. We can exchange and learn together.”