js复制文本到粘贴板(Clipboard.writeText())

JS复制文本到粘贴板 (Clipboard.writeText())

复制文本到粘贴板是一个常见的需求，比如网站上提供一个按钮，点击后可以将某个文本复制到用户的粘贴板中，以便用户可以直接粘贴到其他的应用程序中。在 JavaScript 中，使用 Clipboard 的 API 可以轻松地实现这个功能。下面是完整的攻略。

步骤 1: 获取元素

首先，我们需要从 HTML 页面中获取我们要操作的元素，通常是一个按钮或者一个文本。

<button id="copy-btn">Copy Text</button>

上面的代码中，我们定义了一个按钮，它的 ID 是 copy-btn。

步骤 2: 监听点击事件

下一步，我们需要在 JavaScript 中监听按钮的点击事件，然后再执行复制操作。

const copyBtn = document.querySelector("#copy-btn");

copyBtn.addEventListener("click", () => {
  // 复制文本到粘贴板
});

在上面的代码中，我们首先使用 document.querySelector() 方法获取了按钮元素，然后使用 addEventListener() 方法给按钮添加了一个 click 事件监听器。当用户点击按钮时，监听器中的代码就会被执行。

步骤 3: 复制操作

在点击事件监听器中，我们需要编写代码来完成复制操作。我们可以使用 Clipboard API 中的 writeText() 方法将文本写入粘贴板。

const copyBtn = document.querySelector("#copy-btn");

copyBtn.addEventListener("click", () => {
  const textToCopy = "Hello, world!";

  navigator.clipboard.writeText(textToCopy).then(() => {
    alert("Text copied to clipboard");
  }).catch((err) => {
    console.error("Failed to copy text: ", err);
  });
});

在上面的代码中，我们首先定义了一个变量 textToCopy，然后调用 navigator.clipboard.writeText() 方法将这个文本写入粘贴板中。如果操作成功，就会弹出一个提示框告诉用户已经成功复制了文本。如果操作失败，就会在控制台中输出错误信息。

示例 1：将输入框中的文本复制到粘贴板

你可以通过下面的代码，将输入框中的文本复制到粘贴板中。

<input type="text" id="input-field" value="Hello, world!" />
<button id="copy-btn">Copy Text</button>

<script>
  const copyBtn = document.querySelector("#copy-btn");
  const inputField = document.querySelector("#input-field");

  copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(inputField.value).then(() => {
      alert("Text copied to clipboard");
    }).catch((err) => {
      console.error("Failed to copy text: ", err);
    });
  });
</script>

在上面的代码中，我们首先定义了一个输入框和一个按钮。然后在 JavaScript 中监听按钮的点击事件，在点击事件中将输入框中的文本复制到粘贴板中。

示例 2：将多个文本合并后复制到粘贴板

你可以通过下面的代码，将多个文本合并后复制到粘贴板中。

const copyBtn = document.querySelector("#copy-btn");
const textList = ["Hello", "world", "!"];

copyBtn.addEventListener("click", () => {
  const textToCopy = textList.join(" ");

  navigator.clipboard.writeText(textToCopy).then(() => {
    alert("Text copied to clipboard");
  }).catch((err) => {
    console.error("Failed to copy text: ", err);
  });
});

在上面的代码中，我们首先定义了一个文本列表和一个按钮。然后在 JavaScript 中监听按钮的点击事件，在点击事件中将文本列表中的所有文本合并成一个字符串，然后将这个字符串复制到粘贴板中。