前记
记在前面：这是一篇关于javascript调用系统剪贴板的教程。（由于在长时间回来查看此文档居然没有理解，于是重新更新 时间：2025/10/20 20:32）
前情提要
目前原生js操控系统剪贴板有三个办法：
Document.execCommand()方法- 异步的
Clipboard API copy事件和paste事件
这三种方法现代浏览器基本都支持，但请注意因为剪贴板属于系统安全隐私，所以在使用这些函数的时候有些浏览器会抛出隐私请求。
如果用户阻止那么请求剪贴板的操作就会失效。
一、Document.execCommand()方法
使用前请注意该方法已被弃用，如遇无法使用请看点击跳转底部表格中若无则该浏览器已不支持。
使用准备
准备一段需要被复制的文字，尽可能存在于页面中，否则可能会报错。
复制文本到剪切板
首先选中文本( 调用元素的select()方法 )
const inputElement = document.querySelector('#input');
inputElement.select();
然后调用此函数就完成了复制操作
document.execCommand('copy');
粘贴文本到文本框
首先需要聚焦一个元素，最好使用文本框元素。
粘贴时会将剪贴板中的内容粘贴到选中的元素当中。
使用以下代码聚焦文本框
const pasteText = document.querySelector('#output');
pasteText.focus();
粘贴内容到元素
document.execCommand('paste');
二、异步的Clipboard API
Clipboard API是现代剪贴板操作手段，它的操作逻辑超过其他方法，比其他方法更合理，更强大。
它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。但Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。另外若直接在开发者终端中调用会无效。
navigator.clipboard将返回 Clipboard 对象，所有操作都通过这个对象进行（如果navigator.clipboard属性返回undefined，则该浏览器不支持此API）。
const clipboardObj = navigator.clipboard;
复制文本到剪切板
复制数据可以直接使用（参数是要复制的文字）
await navigator.clipboard.writeText('Yo')
复制图片等需要指定类型的数据可以使用
Clipboard.write()
该方法接受一个 ClipboardItem 实例作为参数，表示写入剪贴板的数据（截至2024年9月Chrome 浏览器只支持PNG图片）。
粘贴文本到变量
使用以下方法会使一个变量获取剪贴板内容
const text = await navigator.clipboard.readText();
同样的复制图片等类型可以使用Clipboard.read()该方法返回一个 Promise 对象。一旦该对象的状态变为 resolved，就可以获得一个数组，每个数组成员都是 ClipboardItem 对象的实例。
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type)
ClipboardItem 对象表示一个单独的剪贴项，每个剪贴项都拥有ClipboardItem.types属性和ClipboardItem.getType()方法。
ClipboardItem.types属性返回一个数组，里面的成员是该剪贴项可用的 MIME 类型，比如某个剪贴项可以用 HTML 格式粘贴，也可以用纯文本格式粘贴，那么它就有两个 MIME 类型（text/html和text/plain）。
ClipboardItem.getType(type)方法用于读取剪贴项的数据，返回一个 Promise 对象。该方法接受剪贴项的 MIME 类型作为参数，返回该类型的数据，该参数是必需的，否则会报错。
利用copy和paste事件
使用准备
需要为元素添加copy或者paste事件监听
elent.addEventListener('copy', (event) => {
//your code in there
});
复制文本到剪切板
在copy事件中加入
Event.clipboardData.getData(type)：获取剪贴板数据，需要指定数据类型。Event.clipboardData.clearData([type])：清除剪贴板数据，可以指定数据类型。如果不指定类型，将清除所有类型的数据。Event.clipboardData.items：一个类似数组的对象，包含了所有剪贴项，不过通常只有一个剪贴项。Event.preventDefault()：用于取消默认剪贴板的粘贴和复制操作
粘贴文本到文本框
使用
Event.clipboardData.setData(type, data)：修改剪贴板数据，需要指定数据类型（TEXT）。
总结
使用这些操作需要优秀的js编程经验，你可以使用这种策略进行标签页通信，也可以进行远程认证。
