javascript cannot copy-Front-end Q&A-php.cn

JavaScript is a scripting language widely used in Web development. It can complete a series of tasks such as dynamic interaction of web pages, data verification, form operations, etc. However, when using JavaScript, sometimes we encounter a common problem: text content cannot be copied. In this article, we’ll delve into the root of this problem and provide some solutions so that you can handle text copying issues more smoothly in your development.

Why can’t JavaScript copy text?

First, we need to understand why JavaScript cannot copy text content. In fact, the most common cause of this problem comes from the security mechanisms of modern browsers. When a user attempts to copy text content through JavaScript code, the browser automatically intercepts the operation to protect the user's system security. This is because if JavaScript code can access the contents of the user's clipboard, then anyone can write malicious code and access the user's sensitive information, such as passwords, credit card information, etc. Therefore, browsers often prevent JavaScript from reading or writing text from the clipboard.

Solution

Although the security mechanisms of modern browsers make it more difficult to copy text with JavaScript, it is not completely impossible. Below, we will provide some solutions to solve this problem.

Using the document.execCommand() method

The document.execCommand() method is a JavaScript method that can execute some user commands. It can operate the user interface and interact with the system, one of which is copy operations. This method needs to be called during a user-initiated action, such as clicking a button or using a shortcut key. The following is a sample code:

function copyToClipboard(id) {
  var text = document.getElementById(id).innerText;
  var textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

Copy after login

In the above code, we define a copyToClipboard() function that accepts a parameter id, which represents the element id of the text to be copied. The logic of this function is as follows:

First, we use the innerText attribute to get the text content from the specified element.
Then, we use the createElement() method to create a textarea element and assign the text content to its value attribute.
Next, we add the textarea element to the document (before the last tag).
Then, we use the select() method to select the text content in the textarea element.
Finally, we call the document.execCommand() method to perform the copy operation.
Using clipboard.js library

clipboard.js is a JavaScript library that can help us easily implement text copy operations. This library does not require calling the document.execCommand() method. The clipboard.js library is based on permissioned browser APIs rather than copy and paste events. With this library, we can implement a simple copy text function by writing a small amount of JavaScript code. The following is a sample code using the clipboard.js library:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Clipboard.js Sample</title>
  <!-- 引入clipboard.js库 -->
  <script src="clipboard.js"></script>
  <style type="text/css">
    div {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="copy-btn" data-clipboard-text="Hello, world!">
    Click me!
  </div>

  <script>
    // 初始化clipboard.js库
    new ClipboardJS('.copy-btn');
  </script>
</body>
</html>

Copy after login

In the above sample code, we first introduced the clipboard.js library, and then defined a div element with the data-clipboard-text attribute. This property is used to store the text content to be copied. Finally, in the