JavaScript 中的复制粘贴操作
在日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案。
Clipboard API
可以使用全局的 Navigator.clipboard 来访问剪贴板。
Navigator.clipboard 属性返回 Clipboard 对象,所有操作都通过这个对象进行。
Clipboard 对象提供了四个方法,用来读写剪贴板。它们都是异步方法,返回 Promise 对象。
read( ) 方法
read()
方法可以从剪贴板读取任意数据,可以是文本数据,也可以是二进制数据(比如图片)。该方法需要用户明确给予许可。
read()
方法返回一个 Promise
对象。一旦该对象的状态变为 resolved
,就可以获得一个数组,每个数组成员都是 ClipboardItem 对象的实例。
ClipboardItem 对象表示一个单独的剪贴项,每个剪贴项都拥有 types
属性和 getType( )
方法。
//获取权限
navigator.permissions
.query({name: 'clipboard-read'
})
.then(result => {if (result.state == 'granted' || result.state == 'prompt') {//读取剪贴板navigator.clipboard.read().then(data => {console.log(data)})} else {alert('请允许读取剪贴板!')}
})
readText( ) 方法
readText()
方法可以从剪贴板读取文本内容。该方法需要用户明确给予许可。
//获取权限
navigator.permissions
.query({name: 'clipboard-read'
})
.then(result => {if (result.state == 'granted' || result.state == 'prompt') {//读取剪贴板navigator.clipboard.readText().then(text => {console.log(text)})} else {alert('请允许读取剪贴板!')}
})
write( ) 方法
write()
方法可以将任意数据写入剪贴板,可以是文本数据,也可以是二进制数据。该方法不需要用户许可。
write()
方法接受一个 ClipboardItem 实例作为参数,表示写入剪贴板的数据。
//写入一张图片
const imgURL = 'https://dummyimage.com/300.png'
const data = await fetch(imgURL)
const blob = await data.blob()
await navigator.clipboard.write([new ClipboardItem({[blob.type]: blob})
])
注意,Chrome 浏览器目前只支持写入 PNG 格式的图片。
writeText( ) 方法
writeText()
方法可以写入文本内容至剪贴板。该方法不需要用户许可。
navigator.clipboard.writeText('写入剪贴板文本内容')
安全限制
由于用户可能把敏感数据(比如密码)放在剪贴板,允许脚本任意读取会产生安全风险,所以这个 API 的安全限制比较多。
首先,Chrome 浏览器规定,只有 HTTPS 协议的页面才能使用这个 API。不过,开发环境(localhost
)允许使用非加密协议。
其次,调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API ,跟剪贴板相关的有两个权限:clipboard-write
(写权限)和 clipboard-read
(读权限)。“写权限”自动授予脚本,而“读权限”必须用户明确同意给予。也就是说,写入剪贴板,脚本可以自动完成,但是读取剪贴板时,浏览器会弹出一个对话框,询问用户是否同意读取。
Document.execCommand()
这个 API 已弃用,不推荐使用它,但是为了兼容还是了解一下吧。
document.execCommand()
方法用于操纵可编辑区域的内容。
document.execCommand('copy')
document.execCommand('copy')
实现复制操作
示例:
<input id="copyContent" value="需要被复制内容">
<button id="copyBtn">点我复制</button>
const copyBtn = document.querySelector('#copyBtn');
const copyContent = document.querySelector('#copyContent');
// 复制操作要放在事件监听函数里面,由用户触发(比如用户点击按钮)。
copyBtn.addEventListener('click', () => {copyContent.select();document.execCommand('copy');
})
document.execCommand('paste')
document.execCommand('paste')
实现粘贴操作
示例:
<input id="paste" placeholder="粘贴">
const pasteText = document.querySelector('#paste');
pasteText.focus();
document.execCommand('paste');
Chrome、Firefox 不支持 document.execCommand('paste')
clipboard.js
除了使用原生 JS 外,还可以使用一些第三方的库,比如 clipboard.js 来实现复制文本到剪贴板的操作。
安装
npm 安装
npm install clipboard --save
script 标签引入
<script src="dist/clipboard.min.js"></script>
使用
1、用一个元素当触发器来复制另一个元素的文本,需要传递 DOM
选择器,HTML
元素或 HTML
元素列表来实例化它。
2、在触发器元素上添加 data-clipboard-target
属性,该属性值是一个元素选择器,用来匹配另一个需要被复制的元素。
示例:
<div id="copyContent">需要被复制的内容</div>
<button id="copyBtn" data-clipboard-target="#copyContent">点击复制</button>
//触发器
var clipboard = new ClipboardJS('#copyBtn')clipboard.on('success', function (e) {console.log('复制成功!')console.log('操作文本内容:', e.text)console.log('触发操作的DOM元素:', e.trigger)e.clearSelection()
})clipboard.on('error', function (e) {console.log('复制失败')console.log('触发操作的DOM元素:', e.trigger)
})
另外,触发器元素上也可以定义 data-clipboard-action
属性为 copy
或 cut
,来明确操作是复制还是剪切,如果忽略了这个属性,则默认是复制。值为 cut
时仅适用于 input
或 textarea
元素。
<input id="copyContent" value="需要被复制的内容"/>
<button id="copyBtn" data-clipboard-target="#copyContent" data-clipboard-action="cut">点击剪切</button>
//触发器
var clipboard = new ClipboardJS('#copyBtn')clipboard.on('success', function (e) {console.log('复制成功!')console.log('操作文本内容:', e.text)console.log('触发操作的DOM元素:', e.trigger)e.clearSelection()
})clipboard.on('error', function (e) {console.log('复制失败')console.error('触发操作的DOM元素:', e.trigger)
})
如果在触发器元素上定义 data-clipboard-text
属性,则不需要另一个元素来复制其内容。data-clipboard-text
属性值就是需要被复制的内容。
示例:
<button id="copyBtn" data-clipboard-text="需要被复制的内容">点击复制</button>
//触发器
var clipboard = new ClipboardJS('#copyBtn')clipboard.on('success', function (e) {console.log('复制成功!')console.log('操作文本内容:', e.text)console.log('触发操作的DOM元素:', e.trigger)e.clearSelection()
})clipboard.on('error', function (e) {console.log('复制失败')console.error('触发操作的DOM元素:', e.trigger)
})
事件监听
copy 事件
用户向剪贴板放入数据时,将触发 copy
事件。
示例:
document.addEventListener('copy', function (event) {alert('触发复制事件')//剪切板数据console.log(event.clipboardData)
})
clipboardData 对象
上面示例中,事件对象的 clipboardData 属性包含了剪贴板数据。它是一个对象,有以下属性和方法。
setData( )
方法
Event.clipboardData.setData(type, data)
:在 cut
和 copy
事件中修改剪贴板数据,需要指定数据类型。
示例:
<div id="copyContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos expedita temporibus facere mollitia nemo at voluptatibus dicta commodi neque iusto nesciunt earum suscipit deserunt delectus numquam cum nulla libero fugit.
</div>
var copyContent = document.querySelector('#copyContent');
copyContent.addEventListener('copy', (event) => {const selection = document.getSelection();//复制文本内容转大写event.clipboardData.setData('text/plain', selection.toString().toUpperCase());event.preventDefault();
});
getData( )
方法
Event.clipboardData.getData(type)
:在 paste
事件中获取剪贴板数据,需要指定数据类型。
示例:
document.addEventListener('paste', function (event) {alert('触发粘贴事件')//获取粘贴文本内容var text = event.clipboardData.getData('text/plain');console.log('粘贴内容:',text)
})
items
属性
Event.clipboardData.items
:一个类似数组的对象,包含了所有剪贴项,不过通常只有一个剪贴项。
cut 事件
cut
事件则是在用户进行剪切操作时触发,它的处理跟 copy
事件完全一样,也是从 Event.clipboardData
属性拿到剪切的数据。
示例:
document.addEventListener('cut', function () {alert('触发剪切事件')//剪切板数据console.log(event.clipboardData)
})
paste 事件
用户使用剪贴板数据,进行粘贴操作时,会触发 paste
事件。
示例:
document.addEventListener('paste', async (e) => {e.preventDefault();//获取剪贴板里的文本数据const text = await navigator.clipboard.readText();console.log('粘贴文本: ', text);
});
相关示例
点击复制
读取剪贴板图片
复制追加版权信息
参考文章
Web 一键复制与粘贴
剪贴板复制粘贴操作汇总
JavaScript复制内容到剪贴板
剪贴板操作 Clipboard API 教程
复制粘贴插件——clipboard.js的使用
JavaScript 中的复制粘贴操作相关推荐
- Windows下cmd(命令提示符)中的复制粘贴操作
Vista/Win7下操作如图 > 1.如上图,右键命令提示符窗口的标题栏,选择属性. > 2.选择"编辑选项"里的"快速编辑模式",并确定之: & ...
- 【转】vi编辑器中如何复制粘贴文本
转自:http://old.blog.edu.cn/user2/icethawless/archives/2006/1489681.shtml vi中多个文件相互之间的复制.粘贴功能简介 大家在vi编 ...
- 怎样实现cmd命令窗口的快速复制粘贴操作
我们在cmd中按ctrl+c是不是没有反映那就对了 应该怎样操作呢:? 看我说明: [详解]cmd(命令提示符)下的复制粘贴操作 设置步骤: 查看全文 http://www.taodudu.cc/ne ...
- JavaScript:实现复制粘贴剪切功能
文章目录 js实现复制粘贴功能 方式一:原生方式实现复制粘贴剪切(不推荐) 方式二:浏览器自带clipboard API实现复制粘贴(推荐) 简介 特点 clipboard对象及相关API Clipb ...
- Ubuntu的复制粘贴操作及常用快捷键
Ubuntu的复制粘贴操作 1.最为简单,最为常用的应该是鼠标右键操作了,可以选中文件,字符等,右键鼠标,复制,到目的地右键鼠标,粘贴就结束了. 2.快捷键.一般通用的是Ctrl+C与Ctrl+V.不 ...
- JavaScript中常见的字符串操作函数及用法汇总
转载地址:http://www.jb51.net/article/65358.htm 这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换 ...
- win10与内置ubuntu之间复制粘贴操作
cmd窗口执行bash后得到的命令窗与在xshell不同,通过shift+v无法黏贴,并且在输入界面鼠标右键无法使用.后来发现鼠标右键可以在对话框的标题上点击,弹出的菜单上面 ==> Edit( ...
- 如何优雅的在ubuntu终端中使用复制粘贴
如何优雅的在ubuntu终端中使用复制粘贴 文章目录 前言 更改终端里面的复制粘贴命令 修改鼠标按键映射 介绍 安装 依赖 编译安装 配置文件 前言 安装了ubuntu20.4 后发现终端里面的复制粘 ...
- 在vim中快速复制粘贴多行
在vim中快速复制粘贴多行 用vim写代码时,经常遇到这样的场景,复制多行,然后粘贴. 这样做: 1. 将光标移动到要复制的文本开始的地方,按v进入可视模式. 2. 将光标移动到要复制的文本的结束的 ...
最新文章
- js中获取事件对象的方法小结
- gitlab服务器邮箱配置
- 图解WebGLThree.js工作原理【转】
- 3.API的调用过程(保存现场)
- 运维自动化轻量级工具pssh
- 编写properties文件的Eclipse插件
- django中的admin组件
- 编译编译时,用不到的库,一定不要链接
- 软件项目管理案例教程期末考试知识点复习(一)软件项目管理概述
- 编码器控制电机正反转梯形图_怎么用编码器控制电机位移距离
- 02、DHT11温湿度传感器
- WebView 入坑
- java 数组 eqlue_Java源码浅析,Character(3)
- 【python】如何下载漫画章节随时看?漫迷们不容错过哦
- 常用工具的配置和bash
- 毕设必看——Python ttkbootstrap 制作账户注册信息界面
- JSRUN, 前端教程大家一起来编写
- mysql插座返回6M数据_MySQL数据库设计与应用智慧树期末答案
- 深入理解android的读后感_如何写好读后感
- Final Cut Pro X 快捷键