JS获取剪贴板内容|极客笔记

JS获取剪贴板内容

在网页开发中，有时候我们需要获取用户复制到剪贴板中的内容，这样就可以在网页中处理这些内容，或者让用户粘贴到其他地方使用。在现代浏览器中，通过JavaScript就可以实现获取剪贴板内容的功能。本文将详细介绍如何使用JavaScript获取剪贴板内容的方法。

使用document.execCommand方法

在大部分浏览器中，我们可以使用document.execCommand方法来操作浏览器的剪贴板，其中包括获取剪贴板内容。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Get Clipboard Content</title>
</head>
<body>
  <button onclick="getClipboardContent()">Get Clipboard Content</button>
  <div id="clipboardContent"></div>

  <script>
    function getClipboardContent() {
      navigator.clipboard.readText()
        .then(text => {
          document.getElementById('clipboardContent').innerText = text;
        })
        .catch(err => {
          console.error('Failed to read clipboard content: ', err);
        });
    }
  </script>
</body>
</html>

在这个示例中，我们通过按钮点击事件调用getClipboardContent函数，该函数使用navigator.clipboard.readText()方法来获取剪贴板中的文本内容，然后将内容显示在页面上。

运行上面的代码，点击按钮就可以获取剪贴板中的文本内容，并显示在页面上。

需要注意的是，由于浏览器安全策略的限制，获取剪贴板内容只能在用户主动操作的情况下才能生效，例如点击按钮触发。

兼容性处理

由于Clipboard API的支持情况并不一致，为了保证在不支持该API的浏览器中也可以获取剪贴板内容，我们可以使用传统的方式来处理。例如使用document.execCommand('paste')来获取剪贴板内容：

function getClipboardContentFallback() {
  var textarea = document.createElement("textarea");
  document.body.appendChild(textarea);
  textarea.focus();
  document.execCommand('paste');
  var clipboardContent = textarea.value;
  document.body.removeChild(textarea);

  document.getElementById('clipboardContent').innerText = clipboardContent;
}

这种方式虽然不够优雅和安全，但可以在不支持Clipboard API的浏览器中实现获取剪贴板内容的功能。