JavaScript怎么实现一键复制文本功能

这篇文章主要介绍了javascript怎么实现一键复制文本功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么实现一键复制文本功能文章都会有所收获，下面我们一起来看看吧。

一、navigator.clipboard 对象

1. navigator.clipboard 方法汇总

2. 代码示例

方法 1: Clipboard.writeText(), 用于将文本内容写入剪贴板；

    document.body.addEventListener("click", async (e) => {      await navigator.clipboard.writeText("Yo");    });

方法 2: Clipboard.write(), 用于将文本数据/二进制数据写入剪贴板

Clipboard.write()不仅在剪贴板可写入普通text，还可以写入图片数据（Chrome浏览器仅支持png格式）。

 async function copy() {   const image = await fetch("kitten.png");   const text = new Blob(["Cute sleeping kitten"], { type: "text/plain" });   const item = new ClipboardItem({     "text/plain": text,     "image/png": image,   });   await navigator.clipboard.write([item]); }

3. 优缺点

① 优点

所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿;

无需提前选中内容，可以将任意内容（比如图片）放入剪贴板；

② 缺点: 允许脚本任意读取会产生安全风险，安全限制较多。

Chrome 浏览器规定，只有 https 协议的页面才能使用这个 api;

调用时需要明确获得用户的许可。

二、document.execCommand() 方法

1. document.execCommand() 方法汇总

2. 代码示例

document.execCommand('copy')，用于将已选中的文本内容写入剪贴板。

结合 window.getSelection()方法实现一键复制功能：

    const TestCopyBox = () => {    const onClick = async () => {    const divElement = document.getElementById("select-div");    if (window.getSelection) {    const selection = window.getSelection();    const range = document.createRange();    range.selectnodeContents(divElement);    selection.removeAllRanges();    selection.addRange(range);    }    document.execCommand("copy");    };    return <div>     <button onClick={onClick}>copy</button>     <div id="select-div"> <input /> <span>test2: 3</span><span>test3: 94</span></div>    </div>    };

3. 优缺点

① 优点

使用方便;

各种浏览器都支持；

② 缺点

只能将选中的内容复制到剪贴板;

同步操作，如果复制/粘贴大量数据，页面会出现卡顿。

关于“JavaScript怎么实现一键复制文本功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript怎么实现一键复制文本功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。