JavaScript 如何将文本复制到剪贴板

在创建复杂的网页和应用程序时，您可能希望包含复制功能。用户不再需要选择文本并按下键盘上的几个键来复制文本，而是可以通过单击按钮或图标来复制文本。

当需要复制激活码、恢复密钥、代码片段等内容时，通常会使用这种功能。为了让用户知道已将文本复制到剪贴板，您还可以添加诸如警报或屏幕上的文本（可以是模态框）等功能。

过去，通常会使用document.execCommand()命令来实现这一点，但现在它已经被废弃。现在可以使用剪贴板API，它允许您异步读取和写入系统剪贴板，并响应剪贴板活动（剪切、复制和粘贴）。JavaScript的剪贴板API可以用于将文本复制到剪贴板。您可以使用剪贴板API读取和写入剪贴板，它提供了与剪贴板通信的手段。

在本教程中，您将学习如何使用剪贴板API将文本和图像写入（复制到）剪贴板。

<p id="myText">Hello World</p>
<button class="btn" onclick="copyContent()">Copy!</button>
<script>
  let text = document.getElementById('myText').innerHTML;
  const copyContent = async () => {
    try {
      await navigator.clipboard.writeText(text);
      console.log('Content copied to clipboard');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
</script>

如何检查浏览器的权限

需要注意的是，只有通过HTTPS传输的页面才与剪贴板API兼容。在尝试写入剪贴板之前，您应该检查浏览器的权限，确保您具有写入权限。navigator将帮助您完成此操作 .permissions 措辞。

navigator.permissions.query({ name: "write-on-clipboard" }).then((result) => {
if (result.state == "granted" || result.state == "prompt") {
alert("Write access granted!");
}
});

使用 Clipboard API 将文本复制到剪贴板的步骤

创建一个按钮或任何元素来触发复制动作。

例如：

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

给按钮添加一个 事件监听器 ，触发复制操作。在事件监听器内部，您需要调用Clipboard API的 writeText 方法来将文本写入剪贴板。

例如：

const copyButton = document.querySelector('#copy-button');
const textToCopy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...'; // Add your text here
copyButton.addEventListener('click', () => {
  navigator.clipboard.writeText(textToCopy)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch((err) => {
      console.error('Failed to copy text: ', err);
    });
});

在上面的示例中，我们首先使用 document.querySelector 选择按钮，然后使用 addEventListener 添加事件侦听器。在事件侦听器内部，我们调用 Clipboard API 的 writeText 方法，将要复制的文本作为参数传递。writeText 方法返回一个 Promise，因此我们使用 .then 处理成功的情况，使用 .catch 处理任何错误。在您的网站上，请确保请求 “clipboard-write” 权限。如果没有此权限，navigator.clipboard.writeText 将无法成功。请在 HTML 文件的 head 部分添加以下代码行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="clipboard-write" content="">

就这样！当用户点击按钮时，文本将被复制到剪贴板上。请注意，这种方法适用于大多数现代浏览器，但某些旧版浏览器可能不支持。在这种情况下，您可能需要使用回退方法，比如使用隐藏的输入字段来存储文本，然后使用 document.execCommand(‘copy’) 来选择它。

示例：在这种情况下，将使用上述策略。

<h1 style="color:crimson;">
    Javatpoint
</h1>
<input type="text"
    value="Javatpoint"
    id="JtpInput">
<button onclick="Javatpoint()">
    Copy text
</button>
<script>
    function Javatpoint() {
        var copyJtpText = document.getElementById("JtpInput");
        copyJtpText.select();
        document.execCommand("copy");
        document.getElementById("jtp")
                .innerHTML ="Copied the text: "
                            + copyJtpText.value;
    }
</script>
<p>
    To copy the text from the text field, click the button. <br>
    Try to paste the text (e.g. ctrl+v)
    afterwards in a different window, to see the
    effect.
</p>
<p id="jtp"></p>

输出

JavaScript 如何将文本复制到剪贴板