复制字符串 JS - Javascript

简介

复制字符串是在Web开发中非常常见的操作，有时候我们需要将一个字符串复制到剪贴板中，从而方便地进行粘贴。本篇文章将介绍Javascript中如何复制字符串并将其添加到剪贴板中。

实现

Javascript中有两种主要的复制字符串的方法：使用document.execCommand()和Clipboard API。本文将介绍这两种方法。

使用document.execCommand()

function copyStringUsingExecCommand(str) {
  var temp = document.createElement("textarea");
  temp.value = str;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);
}

1. 首先，我们创建了一个textarea元素
2. 然后，将待复制的字符串赋值给该元素的value属性
3. 将该元素添加到页面上
4. 选择元素
5. 实现复制操作
6. 最后从页面中移除该元素

使用Clipboard API

function copyStringUsingClipboardAPI(str) {
  navigator.clipboard.writeText(str).then(
    function() {
      console.log("Copied to clipboard successfully!");
    },
    function() {
      console.error("Failed to copy to clipboard!");
    }
  );
}

1. 我们使用navigator.clipboard.writeText()方法
2. 该方法需要一个字符串作为参数，即我们要复制的内容
3. 方法返回一个Promise对象
4. then()方法的第一个参数是成功的回调函数，第二个参数是失败的回调函数

结论

以上是两种常见的复制字符串的方法，使用document.execCommand()具有更广泛的浏览器兼容性，但需要添加临时元素，而使用Clipboard API则更加简单、易用。