2022更新最新兼容方法具体参考如下：关于使用js复制到剪贴板的兼容性https://blog.csdn.net/qq_4530...December202108更新三种方法介绍目前实现剪贴板操作的方法有3种。Document.execCommand()方法异步剪贴板API复制事件和粘贴事件1.Document.execCommand()方法Document.execCommand()是传统的操作剪贴板的方法，各种浏览器都支持。支持复制、剪切、粘贴三种操作。document.execCommand('copy')(复制)document.execCommand('cut')(剪切)document.execCommand('paste')(粘贴)(1)复制操作复制时，先选中文本，然后调用document.execCommand('copy')，选中的文本会进入剪贴板。constinputElement=document.querySelector('#input');inputElement.select();document.execCommand('copy');在上面的例子中，脚本首先选中输入框inputElement（inputElement.select()）中的文本，然后document.execCommand('copy')将其复制到剪贴板。注意复制操作最好放在事件监听函数中，由用户触发（比如用户点击某个按钮）。如果脚本自动执行，某些浏览器可能会报错。(2)粘贴操作粘贴时，调用document.execCommand('paste')，将剪贴板中的内容输出到当前焦点元素。constpasteText=document.querySelector('#output');pasteText.focus();document.execCommand('粘贴');(3)缺点Document.execCommand()方法虽然方便，但也有一些缺点。首先，它只能将选中的内容复制到剪贴板，不能向剪贴板写入任意内容。其次，它是一个同步操作，如果复制/粘贴大量数据，页面会卡住。有的浏览器还会弹出一个提示框询问用户权限，页面会变得无响应，直到用户做出选择。为了解决这些问题，浏览器厂商提出了异步剪贴板API。2.异步剪贴板API剪贴板API是下一代剪贴板操作方法，比传统的document.execCommand()方法更加强大和合理。它的所有操作都是异步的，并返回Promise对象而不会导致页面延迟。此外，它可以将任意内容（如图片）放入剪贴板。navigator.clipboard属性返回剪贴板对象，通过它执行所有操作。constclipboardObj=navigator.clipboard;如果navigator.clipboard属性返回undefined，则表示当前浏览器不支持该API。由于用户可能会将敏感数据（如密码）放在剪贴板中，允许脚本任意读取会造成安全隐患，因此该API有更多的安全限制。首先，Chrome浏览器规定只有HTTPS协议的页面才能使用这个API。但是，开发环境（本地主机）允许使用非加密协议。其次，调用时需要明确获得用户的许可。权限的具体实现使用PermissionsAPI。与剪贴板相关的权限有两种：clipboard-write（写权限）和clipboard-read（读权限）。“写入权限”自动授予脚本，而“读取权限”必须在用户明确同意的情况下授予。也就是说，写入剪贴板可以由脚本自动完成，但是在读取剪贴板时，浏览器会弹出对话框询问用户是否同意读取。另外，需要注意的是脚本总是读取当前页面的剪贴板。这样带来的一个问题是，如果将相关代码粘贴到开发者工具中直接运行，可能会报错，因为此时的当前页面是开发者工具的窗口，而不是网页。(async()=>{consttext=awaitnavigator.clipboard.readText();console.log(text);})();如果将上面的代码粘贴到开发者工具中运行，会报错。因为代码运行时，开发者工具窗口就是当前页面，而这个页面上并没有ClipboardAPI依赖的DOM接口。一种解决方法是将相关代码放在setTimeout()中延时运行，在调用该函数前快速点击浏览器的页面窗口，使其转为当前页面。setTimeout(async()=>{consttext=awaitnavigator.clipboard.readText();console.log(text);},2000);将以上代码粘贴到开发者工具中运行后，快速点击网页的页面窗口，使其成为当前页面，这样就不会报错了。3.Clipboard对象Clipboard对象提供了四种读取和写入剪贴板的方法。它们都是返回Promise对象的异步方法。4.1Clipboard.readText()Clipboard.readText()方法用于复制剪贴板中的文本数据。document.body.addEventListener('click',async(e)=>{consttext=awaitnavigator.clipboard.readText();console.log(text);})在上面的例子中，用户点击页面后，它会输出剪贴板里面的文本。注意浏览器会弹出对话框询问用户是否允许脚本读取剪贴板。如果用户不同意，脚本会报告错误。这时候可以使用try...catch结构来处理错误。异步函数getClipboardContents(){try{consttext=awaitnavigator.clipboard.readText();console.log('粘贴内容：',text);}catch(err){console.error('读取剪贴板内容失败：',err);}}4.2Clipboard.read()Clipboard.read()方法用于复制剪贴板中的数据，可以是文本数据，也可以是二进制数据（比如图片）。此方法需要用户的明确许可。此方法返回一个Promise对象。一旦对象的状态被解析，一个数组就可用，它的每个成员都是ClipboardItem对象的一个??实例。asyncfunctiongetClipboardContents(){try{constclipboardItems=awaitnavigator.clipboard.read();for(constclipboardItemofclipboardItems){for(consttypeofclipboardItem.types){constblob=awaitclipboardItem.getType(type);.log(URL.createObjectURL(blob));}}}catch(err){console.error(err.name,err.message);ClipboardItem对象表示单个剪贴板项，每个剪贴板项都有一个ClipboardItem.types属性和ClipboardItem.getType()方法。ClipboardItem.types属性返回一个数组，其中的成员是剪贴板项可用的MIME类型。例如，剪贴板项目可以以HTML格式或纯文本格式粘贴，因此它具有两种MIME类型（text/html和text/plain）。ClipboardItem.getType(type)方法用于读取剪贴板项的数据并返回一个Promise对象。此方法接受报废项目的MIME类型作为参数并返回此类型的数据。这个参数是必须的，否则会报错。4.3Clipboard.writeText()Clipboard.writeText()方法用于将文本内容写入剪贴板。document.body.addEventListener('click',async(e)=>{awaitnavigator.clipboard.writeText('Yo')})上面的例子是脚本在用户点击网页后将文本数据写入剪贴板页。该方法不需要用户权限，但最好放在try...catch中，防止报错。异步函数copyPageUrl(){try{awaitnavigator.clipboard.writeText(location.href);console.log('页面URL已复制到剪贴板');}catch(err){console.error('复制失败：',err);}}4.4Clipboard.write()Clipboard.write()方法用于向剪贴板写入任意数据，可以是文本数据，也可以是二进制数据。该方法接受一个ClipboardItem实例作为参数，表示写入剪贴板的数据。尝试{constimgURL='https://dummyimage.com/300.png';constdata=awaitfetch(imgURL);constblob=awaitdata.blob();awaitnavigator.clipboard.write([newClipboardItem({[blob.type]:blob})]);console.log('Imagecopied.');}catch(err){console.error(err.name,err.message);}在上面的例子中，脚本将截取的一张图片写入板子。请注意，Chrome目前仅支持写入PNG格式的图像。ClipboardItem()是浏览器原生提供的构造函数，用于生成ClipboardItem实例。它接受一个对象作为参数。对象的键名是数据的MIME类型，键值是数据本身。下面的例子是将同一个剪贴项的多种格式的值写入剪贴板，一种是文本数据，一种是二进制数据，用于不同场合的粘贴。functioncopy(){constimage=awaitfetch('kitten.png');consttext=newBlob(['可爱的熟睡小猫'],{type:'text/plain'});constitem=newClipboardItem({'text/plain':text,'image/png':image});awaitnavigator.clipboard.write([item]);}五、copy事件、cut事件当用户将数据放入剪贴板时，copy事件会被触发。以下示例将用户放入剪贴板的文本转换为大写。constsource=document.querySelector('.source');source.addEventListener('copy',(event)=>{constselection=document.getSelection();event.clipboardData.setData('text/plain',selection.toString().toUpperCase());event.preventDefault();});在上面的示例中，事件对象的clipboardData属性包含剪贴板数据。它是一个具有以下属性和方法的对象。Event.clipboardData.setData(type,data)：修改剪贴板数据，需要指定数据类型。Event.clipboardData.getData(type)：获取剪贴板数据，需要指定数据类型。Event.clipboardData.clearData([type])：清除剪贴板数据，可以指定数据类型。如果不指定类型，则清除所有类型的数据。Event.clipboardData.items：一个类似数组的对象，包含所有剪贴板项目，但通常只有一个剪贴板项目。下面的例子是拦截用户的复制操作，将指定的内容放入剪贴板。constclipboardItems=[];document.addEventListener('copy',async(e)=>{e.preventDefault();try{letclipboardItems=[];for(constitemofe.clipboardData.items){if(!item.type.startsWith('image/')){continue;}clipboardItems.push(newClipboardItem({[item.type]:item,}));awaitnavigator.clipboard.write(clipboardItems);console.log('图像已复制。');}}catch(err){console.error(err.name,err.message);}});在上面的例子中，首先使用e.preventDefault()取消剪贴板的默认操作，然后脚本接管复制操作。当用户执行切割操作时触发切割事件。它的处理和复制事件完全一样，剪切的数据也是从Event.clipboardData属性中获取的。6.粘贴事件当用户使用剪贴板数据进行粘贴操作时，会触发粘贴事件。以下示例拦截粘贴操作，并通过脚本检索剪贴板中的数据。document.addEventListener('paste',async(e)=>{e.preventDefault();consttext=awaitnavigator.clipboard.readText();console.log('Pastedtext:',text);});,原理：利用输入框的.select()事件选择要复制的文本。使用document.execCommand("copy")将文本复制到剪贴板。【MDN已弃用，部分浏览器可以使用】替代方案：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API2.查阅资料constcopyText=document.getElementById('copyText')copyText.select()document.execCommand("复制");//执行浏览器复制命令——————————————————版权声明：本文为CSDN博主“X.Py”原创文章遵循CC4.0BY-SA版权协议.转载请附上原文出处链接及本声明。
