The need to copy shared links to the clipboard was a simple feature in the previous project, but dealing with compatibility is not as simple as most modern browsers don’t provide a generic clipboard copy interface (or disable it by default if they do) for security reasons.

After searching the Internet, there are two methods:

  1. Use native JavaScript window.clipboardData to achieve the function of copying to the clipboard;
  2. Use the Zero Clipboard library;

After trying it, I found that none of the existing schemes could meet the requirements. Solution 1 only supports Internet Explorer, but does not work with Firefox or Chrome. The second scheme is that the ZeroClipboard adopted by the vast majority of existing websites (including Github, etc.) is a JS plug-in developed by foreign big god for clipboard replication, which is based on Flash to achieve cross-browser replication function. When we use ZeroClipboard, it hides a small Flash movie (SWF) without affecting our user interface. All we need to do is copy it. But Flash is dying out in modern browsers, and firefox doesn’t have Flash on by default, so Zero Clipboard isn’t very compatible either.

Let’s get down to business

So, is there a simple, compatible solution for copying to the clipboard? Some! That’s clipboard.js on Github

How to use: 1. import clipboard.js file 2.new an instance 3. Bind the instance to the SUCCESS and error methods

Example 1

<button id=" BTN "data-clipboard-action="copy" data-clipboard-text=" copy" > </button> 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); }); clipboard.destroy();Copy the code

Note: 1. Clipboard provides three properties in the instance

  • Data-clipboard-action: method, optional copy, cut
  • Data-clipboard-text: indicates the content to be copied/clipped
  • Data-clipboard-target: The target DOM to copy/cut, if not the data-clipboard-text of the current instance. Data-clipboard-target can also be written as other DOM elements, using CSS selectors, such as example 2.Pay attention toIf both data-clipboard-target and data-clipboard-text are available, data-clipboard-text is used

2. If you are developing a one-page application and may need to manage the DOM lifecycle more precisely, ClipBoard provides the Destroy () event to destroy clipBoard instance 3 created. Note: If data-clipboard-text is not null, the cut method is invalid

Example 2:

<textarea cols="20" rows="10" id="text"> </textarea> <button ID =" BTN "data-clipboard-action="cut" </button> 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); }); clipboard.destroy(); </script>Copy the code