js实现copy文本功能

95 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" name="input" />
    <button id="btn">copy</button>
    <script>
      const input = document.getElementById("input");
      document.getElementById("btn").addEventListener("click", function (e) {
        if (navigator.clipboard) {
          // clipboard api 复制
          navigator.clipboard.writeText(input.value);
        } else {
          var textarea = document.createElement("textarea");
          document.body.appendChild(textarea);
          // 隐藏此输入框
          textarea.style.position = "fixed";
          textarea.style.clip = "rect(0 0 0 0)";
          textarea.style.top = "10px";
          textarea.value = text; // 赋值
          textarea.select(); // 选中
          document.execCommand("copy", true); // 复制
          document.body.removeChild(textarea); // 移除输入框
        }

        // 2.document.execCommand("copy")
        // input.select(); // 选中文本
        // document.execCommand("copy"); // 执行浏览器复制命令
      });
    </script>
  </body>
</html>