JavaScript 获取剪贴板内容

在 web 开发中，获取剪贴板内容是非常常见的需求。然而，由于浏览器的安全限制，在 JavaScript 中直接访问剪贴板是不被允许的。

但是，我们仍然可以通过一些技巧实现 JavaScript 获取剪贴板内容。本文将介绍几种常见的实现方法，以及它们的优缺点。

方法一：使用 execCommand

使用 execCommand 是最常见的获取剪贴板内容的方法。这个方法可以执行浏览器的命令，其中一个命令就是 paste，用于获取剪贴板内容。

document.execCommand('paste');

然而，此方法需要在一个可编辑的元素中执行才有效。因此，我们需要创建一个可编辑的元素，并在其中执行 execCommand。

const el = document.createElement('div');
el.contentEditable = true;
document.body.appendChild(el);

const result = document.execCommand('paste');

document.body.removeChild(el);

这样就可以获取到剪贴板中的内容了。然而，这种方法存在一个缺点，就是会在页面上创建一个可编辑的元素，而且获取到的内容会包含 HTML 标签和格式信息。

方法二：使用 Clipboard API

从 Chrome 66 开始，浏览器提供了 Clipboard API，可以方便地访问剪贴板。

navigator.clipboard.readText().then(text => console.log(text));

这种方法的优点是简单、可靠，而且可以直接获取文本内容。不过，这个 API 目前还不被所有浏览器完全支持，需要在使用前检查是否支持该 API。

方法三：使用 document.getSelection

如果我们只需要获取当前选中的文本，而不是剪贴板的全部内容，可以使用 document.getSelection。

const sel = document.getSelection();
const result = sel ? sel.toString() : '';

这种方法的优点是简单、快速，而且不需要创建额外的元素。但是，它无法获取剪贴板中的内容，只能获取当前选中文本的内容。

方法四：使用 contenteditable 元素

如果我们不想使用 execCommand，但是又需要获取剪贴板中的格式化信息，可以使用 contenteditable 属性创建一个可编辑的元素。

const el = document.createElement('div');
el.contentEditable = true;
document.body.appendChild(el);

el.focus();
document.execCommand('paste');

const result = el.innerHTML;

document.body.removeChild(el);

这种方法的优点是可以获取剪贴板中的格式化信息，而且只需要创建一个元素。缺点是会在页面上添加一个可编辑元素。此外，在某些浏览器中，必须在元素被添加到 DOM 树中后才能执行 execCommand。

结论

在 JavaScript 中获取剪贴板内容需要通过一些技巧来实现。我们可以使用 execCommand、Clipboard API、document.getSelection 或 contenteditable 元素来实现这一需求。每种方法都有自己的特点和适用场景，需要根据实际情况选择。