How to implement pasteboard copy function using JS

This article will analyze 20 lines of JS code to implement the pasteboard function. It is very good and has reference value. Friends in need can refer to it

Using the clipboard is a basic skill. As a coder, everyone should know that Tab, Ctrl/Cmd A, Ctrl/Cmd C and Ctrl/Cmd V are the shortcut keys for auto-focus, copy and paste respectively.

It may not be easy for ordinary users. Even if a user knows what a clipboard is, it will be difficult to highlight the exact text they want (except for) those with great eyesight or quick reflexes. If the user doesn't know the keyboard shortcuts, can't see the hidden editing menu, has never used the right-click menu, or doesn't know that long-pressing the touch screen brings up the options menu, then he will probably not be aware of the copy function.

So should we provide a "Copy to Clipboard" button to help the user? This feature should be useful even for users who are very familiar with keyboard shortcuts.

About clipboard security

A few years ago, it was impossible for browsers to use the clipboard directly. Developers had to implement it through Flash.

The clipboard may seem inconsequential, but imagine what would happen if the browser could see and manipulate the content at will. JS scripts (including third-party scripts) can view the text information in the clipboard and send passwords, sensitive information, or even entire documents to the remote server.

The current clipboard has limited basic functions and has the following restrictions:

1. Most browsers support the clipboard, except Safari.

2. Support varies by browser, and some features are incomplete or have issues.

3. Events must be initiated by the user, such as clicking the mouse or pressing the keyboard. The script does not have free access to the clipboard.

document.execCommand()

This method is the key to implementing the clipboard. It can pass in three parameters: cut, copy, and paste. . Let’s start with the most commonly used document.execCommand('copy').

Before using, we should check whether the browser supports the copy command: document.queryCommandSupported('copy'); or document.queryCommandEnabled('copy'); , these two methods have the same effect.

But under Chrome, although Chrome does support the use of copy naming, both methods return false. So it's better to wrap the checking code in a try-catch block.

Next step, what should we allow users to copy? Text must be highlighted, and all browsers can use the select() method to select text within text input and textarea. At the same time, Firefox and Chrome/Opera also support the document.createRange method, which allows selecting text from any element, as follows:

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

but IE/Edge does not support it.

clipboard.js

If you don’t want to implement a more robust cross-browser clipboard method yourself, clipboard.js can help you. It has several ways to set options, such as H5's data attribute, setting binding trigger elements and target elements, such as:

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

Do it yourself

clipboard The .js size is only 2Kb. If only some of the following functions are implemented, it can be implemented within 20 lines of code:

Only some form elements can be copied

If in an unsupported browser (yes, Safari), you can highlight the selected text and prompt the user to press Ctrl/Cmd C.

Like clipboard.js, first create a button to trigger the method, which has a data attribute data-copytarget, pointing to the element to be copied (i.e. #website)

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand(&#39;copy&#39;) ,。若失败，文本保持选中状态，显示提示框：
(function() {
 &#39;use strict&#39;;
 // click events
 document.body.addEventListener(&#39;click&#39;, copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand(&#39;copy&#39;);
    inp.blur();
   }
   catch (err) {
    alert(&#39;please press Ctrl/Cmd+C to copy&#39;);
   }
  }
 }
})();

Example

Although in the above example, including the code for styles and animations, the code has exceeded 20 lines, animations and styles are optional.

Summary:

1. Select the content of the form element to be copied through .select()

2. Call document.execCommand( "copy") method

3. Call the .blur() method to remove focus from the form element

4. Include steps 2 and 3 In the try catch block, if the browser does not support it, it will prompt

Other methods

There are many novel clipboard application methods. For example, Trello.com, when hovering over a card, you can press Ctrl / Cmd C and copy the card's link address to your clipboard. The implementation behind it is to first create a hidden form element containing the URL, then select and copy its content. Very clever and useful - I suspect very few users know about this feature!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement a circular Nodelist Dom list using JS

How to implement text color change after clicking in Vue

How to set the background color for a separate page in Vue-cli

The above is the detailed content of How to implement pasteboard copy function using JS. For more information, please follow other related articles on the PHP Chinese website!