JavaScript复制网页内容教程
要复制网页内容，可以使用JavaScript的`document.execCommand('copy')`方法。首先，需要创建一个临时的textarea元素，将需要复制的内容设置为其值，然后将其插入到页面中。接着，选中这个临时的textarea元素，调用`document.execCommand('copy')`方法执行复制操作。最后，将临时的textarea元素从页面中移除。以下是一个简单的示例代码： ```javascript function copyTextToClipboard(text) { const tempTextarea = document.createElement('textarea'); tempTextarea.value = text; document.body.appendChild(tempTextarea); tempTextarea.select(); document.execCommand('copy'); document.body.removeChild(tempTextarea); } // 使用示例： const contentToCopy = '这里是需要复制的内容'; copyTextToClipboard(contentToCopy); ```
Async Clipboard API方法
HTML5新增的方法，无需引入第三方插件，直接就可以复制内容。低版本的浏览器可能会不兼容。
constpromise=navigator.clipboard.writeText(newClipText);
方法的返回值是个 Promise。并且使用此方法时，页面必须处于 focus 状态，否则会报错。
覆写copy 事件方法
//Overwritewhatisbeingcopiedtotheclipboard.document.addEventListener('copy',function(e){//e.clipboardDataisinitiallyempty,butwecansetittothe//datathatwewantcopiedontotheclipboard.e.clipboardData.setData('text/plain','西炒蛋');//Thisisnecessarytopreventthecurrentdocumentselectionfrom//beingwrittentotheclipboard.e.preventDefault();});Document.execCommandAPI方法
<pid="content">123456</p><buttonid="copyButton">复制</button>
复制div元素内容
constcopyButton=document.getElementById('copyButton');constcontent=document.getElementById('content');copyButton.addEventListener('click',function(){constselection=window.getSelection();constrange=document.createRange();//缓存用户选中的内容constcurrentRange=selection.rangeCount===0?null:selection.getRangeAt(0);//设置文档片段range.selectNodeContents(content);//清空选中内容selection.removeAllRanges();//将文档片段设置为选中内容selection.addRange(range);try{//复制到剪贴板document.execCommand('copy');}catch(err){//提示复制失败}finally{selection.removeAllRanges();if(currentRange){//还原用户选中内容selection.addRange(currentRange);}}});复制input元素内容
constcopyButton=document.getElementById('copyButton');constinputEl=document.getElementById('input');copyButton.addEventListener('click',function(){constselection=window.getSelection();constcurrentRange=selection.rangeCount===0?null:selection.getRangeAt(0);//选中input内容inputEl.select();//复制到剪贴板try{document.execCommand('copy');}catch(err){//提示复制失败//。。。}finally{selection.removeAllRanges();if(currentRange){//还原用户选中内容selection.addRange(currentRange);}}});
