轻松实现JavaScript文本一键复制功能
最编程
2024-02-15 09:05:01
...
最近小编做了一键复制文本的需求(功能如下图所示)。本文简单介绍两种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 (!divElement || !window.getSelection) return;
const selection = window.getSelection();
if (!selection) return;
const range = document.createRange();
range.selectNodeContents(divElement);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
// 取消选中区域
selection.empty();
};
return <div>
<button onClick={onClick}>copy</button>
<div id="select-div"> <input /> <span>test2: 3</span><span>test3: 94</span></div>
</div>
};
3. 优缺点
① 优点
- 使用方便;
- 各种浏览器都支持;
② 缺点
- 只能将选中的内容复制到剪贴板;
- 同步操作,如果复制/粘贴大量数据,页面会出现卡顿。
参考与感谢
-
剪贴板操作 Clipboard API 教程
-
js 点击div元素全选元素上的文字内容
推荐阅读
-
35 岁实现财务*,腾讯程序员手握2300万提前退休?-1000万房产、1000万腾讯股票、加上300万的现金,一共2300万的财产。有网友算了一笔账,假设1000万的房产用于自住,剩下1300万资产按照平均税后20-50万不等进行计算,大约花上26-60年左右的时间才能赚到这笔钱。也就是说,普通人可能奋斗一辈子,才能赚到这笔钱。在很多人还在为中年危机而惶惶不可终日的时候,有的人的35岁,就已经安全着陆,试问哪个打工人不羡慕?但问题是有这样财富积累必然有像样的实力做靠山。没有人可以不劳而获。 看到这里,肯定有人说,那么对于普通人来说,卷可能真就成了唯一的出路。但是卷也有轻松的卷,“偷懒”的卷法,对于程序员而言,刨除掉一时无法改掉的开会传统占用的大部分时间,如何把有限的时间和精力放在真正重要的架构设计、需求设计上,而不是重复的造*,编码、改bug、手动测试。因此在科技改变生活的今天,学会使用AI工具成为程序员们的必备技能。 以全栈式全自动的软件开发工具飞算SoFlu软件机器人为例,作为全球首款面向微服务架构设计和最佳实践的软件机器人,SoFlu软件机器人改变了原来手工编码的作业模式,通过可视化拖拽方式以及参数配置就能实现等同于编写复杂代码的业务逻辑,在设计业务逻辑时就完成了微服务应用开发,做到“业务即图,图即代码”,实现“软件开发,十倍提效”。 而作为飞算SoFlu软件机器人的一个重要组成部分,FuncGPT(慧函数)支持所有类型函数创建。通过自然语言描述Java函数需求,实时生成高质量、高可读性的Java函数代码。生成代码可直接复制到IDEA,或一键导入Java全自动开发工具函数库。 FuncGPT(慧函数)具有五大核心能力: ● 自然语言:通过自然语言即可生成函数,降低软件开发门槛。 ● 秒级函数开发:全自动秒级开发函数,秒级完成,效率千倍提升。 ● 一站式函数开发应用:函数生成即可直接应用,效率、安全有保障。 ● 质量可靠:生成的函数代码符合业界规范、具备良好的可读性,符合最优解。 ● 灵活生成:可以根据开发人员的具体需求生成并支持调整和修改。 以“将文件流转换为File对象”这个需求为例,以下是FuncGPT(慧函数)秒级生成的代码: / 类名:FileConverter // 函数名:convertStreamToFile // 函数功能:将文件流转换为File对象 // POM依赖包:无 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class FileConverter { /** * 将文件流转换为File对象 * @param inputStream 文件流 * @param filePath 文件路径 * @param fileName 文件名 * @return 转换后的File对象 * @throws IOException 如果发生I/O异常 */ public static File convertStreamToFile(InputStream inputStream, String filePath, String fileName) throws IOException { File file = new File(filePath + File.separator + fileName); // 创建File对象 try (FileOutputStream outputStream = new FileOutputStream(file)) { // 创建文件输出流 byte buffer = new byte[1024]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { // 从文件流读取数据并写入文件 outputStream.write(buffer, 0, bytesRead); } } return file; // 返回转换后的File对象 } } // 函数示例 // 将文件流转换为File对象示例 // 入参:inputStream,文件流 // 入参:filePath,文件路径 // 入参:fileName,文件名 // 出参:file,转换后的File对象 // 调用示例: // InputStream inputStream = new FileInputStream("example.txt"); // String filePath = "C:\\Users\\User\\Documents"; // String fileName = "example.txt"; // File file = FileConverter.convertStreamToFile(inputStream, filePath, fileName); // System.out.println(file.getAbsolutePath); // 输出结果:例如,将文件流转换为File对象后,文件的绝对路径为:C:\Users\User\Documents\example.txt // 则输出结果为:C:\Users\User\Documents\example.txt 通过分析,不难发现以上代码:
-
用JavaScript轻松实现一个简单的购物车功能
-
如何轻松使用PHP让复选框实现全选和一键删除多选功能
-
利用Iconfont矢量图标与Iconmoon svg转换结合JavaScript,打造社交分享功能的轻松实现方案
-
用JavaScript实现模块的复制和粘贴功能
-
用原生 JavaScript 实现复制功能的方法
-
用JavaScript实现文本选择和复制功能
-
轻松实现JavaScript文本一键复制功能
-
使用JavaScript实现复制和粘贴功能的方法
-
使用JavaScript实现文本复制和粘贴功能