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) => {
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. 优缺点
① 优点
使用方便;
各种浏览器都支持;
② 缺点
只能将选中的内容复制到剪贴板;
同步操作,如果复制/粘贴大量数据,页面会出现卡顿。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码