JavaScript怎么实现一键复制文本功能
这篇文章主要介绍了JavaScript怎么实现一键复制文本功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么实现一键复制文本功能文章都会有所收获,下面我们一起来看看吧。
一、navigator.clipboard 对象1. navigator.clipboard 方法汇总方法用途Clipboard.readText()复制剪贴板里的文本数据Clipboard.read()复制剪贴板里的文本数据/二进制数据Clipboard.writeText()将文本内容写入剪贴板Clipboard.write()将文本数据/二进制数据写入剪贴板2. 代码示例
方法 1: Clipboard.writeText(), 用于将文本内容写入剪贴板;
document.body.addEventListener("click",async(e)=>{awaitnavigator.clipboard.writeText("Yo");});
方法 2: Clipboard.write(), 用于将文本数据/二进制数据写入剪贴板
Clipboard.write()不仅在剪贴板可写入普通text,还可以写入图片数据(Chrome浏览器仅支持png格式)。
asyncfunctioncopy(){constimage=awaitfetch("kitten.png");consttext=newBlob(["Cutesleepingkitten"],{type:"text/plain"});constitem=newClipboardItem({"text/plain":text,"image/png":image,});awaitnavigator.clipboard.write([item]);}3. 优缺点
① 优点
所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿;
无需提前选中内容,可以将任意内容(比如图片)放入剪贴板;
② 缺点: 允许脚本任意读取会产生安全风险,安全限制较多。
Chrome 浏览器规定,只有 HTTPS 协议的页面才能使用这个 API;
调用时需要明确获得用户的许可。
二、document.execCommand() 方法1. document.execCommand() 方法汇总方法用途document.execCommand('copy')复制document.execCommand('cut')剪切document.execCommand('paste')粘贴2. 代码示例
document.execCommand('copy'),用于将已选中的文本内容写入剪贴板。
结合 window.getSelection()方法实现一键复制功能:
constTestCopyBox=()=>{constonClick=async()=>{constdivElement=document.getElementById("select-div");if(window.getSelection){constselection=window.getSelection();constrange=document.createRange();range.selectNodeContents(divElement);selection.removeAllRanges();selection.addRange(range);}document.execCommand("copy");};return<div><buttononClick={onClick}>copy</button><divid="select-div"><input/><span>test2:3</span><span>test3:94</span></div></div>};3. 优缺点
① 优点
使用方便;
各种浏览器都支持;
② 缺点
只能将选中的内容复制到剪贴板;
同步操作,如果复制/粘贴大量数据,页面会出现卡顿。
关于“JavaScript怎么实现一键复制文本功能”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript怎么实现一键复制文本功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注行业资讯频道。