JS 获取粘贴文本 - JavaScript

在开发 Web 应用时，获取用户剪贴板上的内容是一个很有用的功能。本文将介绍如何使用 JavaScript 来获取用户剪贴板上的文本。

1. 使用 Clipboard API

HTML5 引入了 Clipboard API，可以方便地获取和操作剪贴板上的内容。使用 Clipboard API 可以轻松地实现在 Web 页面中获取和存储用户剪贴板的文本内容。

在使用 Clipboard API 时，可以通过以下代码来获取剪贴板上的文本：

navigator.clipboard.readText()
  .then(text => console.log('剪贴板上的文本是：', text))
  .catch(err => console.error('Oops, unable to read clipboard contents: ', err));

上述代码使用了 navigator.clipboard 对象的 readText() 方法来读取剪贴板上的文本。执行 readText() 方法后，返回一个 Promise，可以在 Promise 的回调函数中获取到读取的文本内容。

需要注意的是，该 API 的支持情况并不是所有浏览器都一致，目前主流浏览器都支持该 API。

2. 使用 execCommand 方法

除了 Clipboard API，我们还可以使用早期的 execCommand 方法来获取剪贴板上的文本。该方法已被弃用，但是在一些老版本的浏览器中可能还需要使用该方法来实现该功能。

下面是使用 execCommand 方法获取剪贴板上的文本的示例代码：

function handlePasteEvent(e) {
  var clipboardData, pastedData;

  // Get pasted data via clipboard API or via window.clipboardData for old IE support
  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('text');

  console.log('剪贴板上的文本是：', pastedData);
}

document.addEventListener('paste', handlePasteEvent);

上述代码通过监听 paste 事件来获取剪贴板上的文本。在 handlePasteEvent 函数中，使用了 clipboardData 对象的 getData 方法来获取剪贴板上的数据。该方法需要传入一个参数，指定要获取的数据类型。

需要注意的是，该方法在新版的 Chrome、Firefox 和 Safari 浏览器中已经被禁用，所以如果要实现跨浏览器的剪贴板读取功能，最好使用 Clipboard API。

3. 总结

通过使用 Clipboard API 或者 execCommand 方法，我们可以轻松地获取剪贴板上的文本内容。如果仅考虑到兼容性问题，建议使用 Clipboard API。未来随着浏览器版本的更新，Clipboard API 将会更加成熟和完善，也会被更多的浏览器所支持。