JavaScript实现一键复制文本功能的示例代码
更新时间：2023年03月21日 15:08:42 作者：蓝瑟
这篇文章主要为大家介绍两种javascript实现文本复制（将文本写入剪贴板）的方法，文中的示例代码讲解详细，大家可以根据需求特点选用
最近小编做了一键复制文本的需求（功能如下图所示）。本文简单介绍两种javascript实现文本复制（将文本写入剪贴板）的方法——navigator.clipboard和document.execCommand()，大家可以根据需求特点选用。
一、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一键复制文本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
- Web js实现复制文本到粘贴板
- 使用js实现复制功能
- 使用 JS 复制页面内容的三种方案
- JavaScript实现一键复制内容剪贴板
- js复制文本到粘贴板(Clipboard.writeText())
- JS实现一键复制
- Vue中使用highlight.js实现代码高亮显示以及点击复制
- js实现复制粘贴的两种方法
- JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
- JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
- js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）
- 简单实现兼容各大浏览器的js复制内容到剪切板
- JavaScript 实现完美兼容多浏览器的复制功能代码
- 兼容主流浏览器的JS复制内容到剪贴板
- js实现的复制兼容chrome和IE
- 兼容所有浏览器的js复制插件Zero使用介绍
- 用js将内容复制到剪贴板兼容浏览器
- js复制网页内容并兼容各主流浏览器的代码
- JS复制内容到剪切板的实例代码(兼容IE与火狐)
- JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
- 多浏览器兼容性比较好的复制到剪贴板的js代码
- GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
- 兼容IE与Firefox的js 复制代码
- JavaScript 复制功能代码 兼容多浏览器
- 至2023年最好用的兼容多浏览器的原生js复制函数copyText
相关文章
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
这篇文章主要介绍了BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了小程序双头slider选择器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Blazor实现微信的Tab切换功能,本文中的UI组件使用的是MASA Blazor,您也可以是其他的UI框架，这个并不影响实际的运行效果，本文案例是兼容PC和Android的，演示效果是android中执行的，在PC中执行效果依然有效，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Javascript中最常用的55个经典小技巧。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行，开发工具和编译运行工具也能够尽可能简单（诸如text文本即可编辑，window系统自带的浏览器即可编译运行的情况），决定尝试使用javascript来做2016-01-01
javascript实现的LI列表输出，隔行同色的代码...2007-10-10
layer的prompt弹出框,点击回车,触发确定事件的方法
今天小编就为大家分享一篇layer的prompt弹出框,点击回车,触发确定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文是在Web中通过Javascript判断键盘按键事件，并改变按键的默认动作。2009-02-02
这篇文章主要介绍了js实现图片从左往右渐变切换效果的方法,是比较典型的图片渐变切换效果特效,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了关于promise.all()的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论