“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

introduce

We may often encounter features like one-click copy in development requirements, where the user clicks a button and the specified text content is automatically added to the user’s clipboard. In this installment, we will discuss the one-click copy feature and introduce three implementation solutions: the Document. execCommand method, the ClipboardJS library, and the Clipboard API.

ExecCommand method

function copyText(str) {
    var input = document.createElement("input");
    var body = document.querySelector("body");
    body.append(input);
    input.value = str
    input.select();
    document.execCommand("copy");
    input.remove();
}
Copy the code
document.getElementById("btn").addEventListener("click".function(e){
    copyText("copy content");
})
Copy the code

The above code makes it easy to implement the one-click copy function. The main purpose is to create an input to write the content to be copied, and then execute inputElement. Select () to select the text before using Document.execcommand to complete the copy.

In addition, there are three methods for Document. execCommand:

  • Copy:document.execCommand('copy')
  • Paste:document.execCommand('paste')
  • Shear:document.execCommand('cut')

Although Document. execCommand is compatible and easy to use in most browsers, its disadvantages are obvious:

  • If the copied text is too large, the page may stall or even become unresponsive.

  • Copied text must be stored in the input and cannot be written arbitrarily, which is very inflexible.

  • Although it may still work in current browsers, it has been discouraged by the W3C and could be phased out at any time.

Clipboardjs library

We need to install clipboard in advance

# NPM
npm i clipboard
# YARN
yarn add clipboard
Copy the code
import ClipboardJS from "clipboard"
let clipboard = new ClipboardJS("#btn", {
    text() {
        return "copy content";
    }
})
clipboard.on('success'.e= > {
    console.log('success', e)
});
clipboard.on('error'.e= > {
    console.log('error', e)
});
Copy the code

The ClipboardJS library also relies on the Selection and execCommand API, but the execCommand operation is further encapsulated to make it more concise and the library is lightweight with a compressed size of only 3KB, which is automatically degraded according to older browsers. The downside, of course, is that you have to install an extra library, and if the text is too large, there can be different kinds of stuttering or unresponsive situations. However, it has basically met most of our development requirements. For details, you can check its official website for more usage to unlock – ClipboardJS

Clipboard API

The Clipboard API provides the ability to respond to Clipboard commands (cut, copy, and paste) and asynchronously read and write to the system Clipboard.

document.getElementById("btn").addEventListener("click".async (e) => {
    await navigator.clipboard.writeText('copy content')})Copy the code

You can see how convenient the asynchronous Clipboard API is for one-click copy, addressing many of the shortcomings of Document. execCommand. However, for the first time, the user needs to grant secondary permission to access the clipboard content, which means that if the user does not grant permission, it cannot use this feature. The reason why this feature requires user authorization is that it is possible for users to put some sensitive data on the clipboard, and the API will read it randomly, which will cause security risks, so the API requires authorization to do security restrictions. Also note that currently only HTTPS pages and localhost local pages are allowed to use this API.

It can not only write text and binary data, but also read text and binary data. Text, and files such as images, can be copied and read, but only if the user gives permission for the first time.

This is the current state of browser support, so far, out of Internet Explorer, other browsers can basically use this API to complete the one-click copy function.