在过去我们只能使用 document.execCommand 来操作剪贴板。不过,这种操作剪贴板的操作是同步的,并且只能读取和写入 DOM。

现在 Chrome 已经支持了新的 Async Clipboard API,作为 execCommand 替代品。

这个新的 Async Clipboard API 还可以使用 Promise 来简化剪贴板事件并将它们与 Drag-&-Drop API 一起使用。

复制:将文本写入剪贴板

1. 采用 Chrome Async Clipboard API

采用浏览器API的方式,需要浏览器赋予赋值粘贴权限,若用户为主动授权或粘贴失败
writeText() 可以把文本写入剪切板。writeText() 是异步的,它返回一个 Promise:

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已经成功复制到剪切板');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 如果用户没有授权,则抛出异常
    console.error('无法复制此文本:', err);
  });

还可以使用异步函数 的 async 和 await:

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

2. 采用 copy-to-clipboard

这里有个神器的库copy-to-clipboard 用起来更方便,个人做云盘的时候,更新喜欢用这个可以直接复制

粘贴:从剪贴板中读取文本

和复制一样,可以通过调用 readText() 从剪贴板中读取文本,该函数也返回一个 Promise:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

为了保持一致性,下面是等效的异步函数:

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

处理粘贴事件

有计划推出检测剪贴板更改的新事件,但现在最好使用“粘贴”事件。它很适合用于阅读剪贴板文本的新异步方法:

document.addEventListener('paste', event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log('Pasted text: ', text);
  });
});