JS 获取复制的文本 - Javascript

在Web应用程序中，有时候需要获取用户复制的文本内容。Javascript 提供了一个 Clipboard API，可以用于获取剪贴板的数据。本文将向你介绍如何使用 Javascript 来获取复制的文本内容。

获取文本复制

以下是一段代码片段，用于获取复制的文本。在点击复制按钮后，该按钮下方的文本将被复制。可以使用 document.execCommand("copy") 方法来将内容复制到剪贴板中。

<button onclick="copyToClipboard()">复制</button>
<p id="copyText">这里是文本内容</p>

<script>
function copyToClipboard() {
  var copyText = document.getElementById("copyText");
  var input = document.createElement('input');
  input.setAttribute('value', copyText.innerText);
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
  alert("复制成功！");
}
</script>

解释一下上述代码：

1. 首先，我们有一个 HTML 按钮标记，其中 onclick 属性将该按钮的点击事件绑定到 copyToClipboard 函数上。 copyText 变量用于存储要复制的文本。
2. 在 copyToClipboard 函数中，我们创建了一个新的 input 标记，并向其添加了一个 value 属性，该属性设置为将要复制的文本。然后，我们将其添加到文档中。
3. 使用 input.select() 方法选择输入。接着借助 document.execCommand("copy") 方法将文本复制到剪贴板中。最后，我们从文档中删除所创建的元素。

非文本复制

如果需要复制除文本之外的数据，则需要使用 DataTransfer 对象。该对象用于在拖放操作、复制/粘贴操作等过程中存储数据。

以下代码段实现点击按钮，将图像复制到剪贴板中。

<button onclick="copyImage()">复制图像</button>
<img id="copyImage" src="example.png" alt="示例图像">

<script>
function copyImage() {
  var image = document.getElementById("copyImage");
  var dataTransfer = new ClipboardEvent('').clipboardData || new DataTransfer();
  dataTransfer.items.add(image.src, "image/png");
  navigator.clipboard.write(dataTransfer).then(function() {
    alert("复制成功！");
  }, function() {
    alert("无法复制图像！请使用浏览器自带的复制功能。");
  });
}
</script>

解释一下上述代码：

1. 我们有一个 HTML 图像元素，并有一个按钮，点击按钮时可以将图像复制到剪贴板中。
2. 当按钮被点击时，我们首先获取图像元素，然后new一个 ClipboardEvent 局部变量 clipboardData， 或者如果该 API 不受支持，我们则返回 DataTransfer 对象。
3. 使用 dataTransfer.items.add() 方法将该图像添加到数据传输对象中。
4. 最后，我们调用 navigator.clipboard.write 方法，该方法将数据传输对象写入剪贴板中。该方法返回一个 Promise，成功时我们将弹出提示框，而失败时则是另一种提示框。

结论

本文介绍了如何使用 Javascript 获取复制的文本。对于文本复制，我们将其存储在一个临时 input 元素中，然后使用 document.execCommand 方法将其复制到剪贴板中。对于非文本复制，我们使用一个 DataTransfer 对象，将复制的数据放入其中，最后使用 navigator.clipboard API 将其写入剪贴板中。