Js复制内容-Navigator

2021.7

剪切功能

Navigator.clipboard： https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/clipboard
只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。许可操作必须通过取得权限 Permissions API 的 “clipboard-read” 和/或 “clipboard-write” 项获得。

1 2	navigator.clipboard.readText().then( clipText => document.querySelector(".cliptext").innerText = clipText);;

在过去的几年里我们只能使用 document.execCommand 来操作剪贴板。不过，这种操作剪贴板的操作是同步的，并且只能读取和写入 DOM。
现在 Chrome 66 已经支持了新的 Async Clipboard API，作为 execCommand 替代品。
这个新的 Async Clipboard API 还可以使用 Promise 来简化剪贴板事件并将它们与 Drag-&-Drop API 一起使用。

// ## 复制：将文本写入剪贴板
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);
  }
}
// ## 粘贴：从剪贴板中读取文本
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);
  });
});

安全和权限

与许多新的 API 一样，navigator.clipboard 仅支持通过 HTTPS 提供的页面。

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);

  // 监听权限状态改变事件
  permissionStatus.onchange = () => {
    console.log(permissionStatus.state);
  };
});

其他：
window.copy("this is a test string");
不过要注意，该方法的跨平台性不强，低版本的IE可能不支持