JavaScript实现一键复制文本功能的示例代码

更新时间：2023年03月21日 15:08:42 作者：蓝瑟

这篇文章主要为大家介绍两种javascript实现文本复制（将文本写入剪贴板）的方法，文中的示例代码讲解详细，大家可以根据需求特点选用

一、navigator.clipboard 对象

1. navigator.clipboard 方法汇总

方法	用途
Clipboard.readText()	复制剪贴板里的文本数据
Clipboard.read()	复制剪贴板里的文本数据/二进制数据
Clipboard.writeText()	将文本内容写入剪贴板
Clipboard.write()	将文本数据/二进制数据写入剪贴板

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() 方法汇总

方法	用途
document.execCommand('copy')	复制
document.execCommand('cut')	剪切
document.execCommand('paste')	粘贴

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一键复制文本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现无缝滚动图
本文主要分享了js实现无缝滚动图的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
js 中rewrap-ajax.js插件实例代码
这篇文章主要介绍了rewrap-ajax.js插件,需要的朋友可以参考下
2017-10-10
JavaScript清除所有(多个)定时器的方法实战案例
定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码,下面这篇文章主要给大家介绍了关于JavaScript清除所有(多个)定时器的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
javascript中打印当前的时间实现思路及代码
打印当前的时间的方法有很多，在本文为大家详细介绍下使用javascript是如何做到的，具体实现如下，感兴趣的朋友可以参考下
2013-12-12
javascript 学习笔记(onchange等)
javascript 学习笔记，一些简单的小技巧，学习js的朋友可以看下。
2010-11-11
openlayers4实现点动态扩散
这篇文章主要为大家详细介绍了openlayers4实现的点动态扩散，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
javaScript嗅探执行神器-sniffer.js
本文主要介绍了javaScript嗅探执行神器-sniffer.js的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
javascript中for/in循环及使用技巧
如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的，本篇文章给大家介绍javascript中for/in循环及使用技巧，需要的朋友可以参考下
2015-09-09
javascript实现yield的方法
这篇文章介绍了javascript实现yield的方法，有需要的朋友可以参考一下
2013-11-11
小程序短信验证码页面实现demo
这篇文章主要为大家介绍了小程序短信验证码页实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11