木灵鱼儿
阅读:1969
剪贴板事件 copy、cut、paste
很多项目里面会用到复制和粘贴两个功能,但是我平时也用不到,这里就详细学习一下是怎么运作的。
剪贴板事件了解
剪贴板有6个事件,其中现代浏览器火狐只支持三个,ie和谷歌则支持全部。
事件名 | 说明 |
---|---|
beforecopy | 复制事件触发之前触发 |
copy | 复制 |
beforecut | 剪切事件触发之前触发 |
cut | 剪切 |
beforepaste | 粘贴事件触发之前触发 |
paste | 粘贴 |
其中火狐浏览器只支持 copy,cut,paste三个事件。
其中ie和谷歌浏览器的话是都支持的,并且在ie中使用右键菜单进行复制剪切粘贴的操作,事件会触发多次,而在现代浏览器中,你复制一次,只会触发一次copy事件和beforecopy事件这种,哪怕是右键菜单触发。
那么为了兼容性,我们只了解三个事件就行了。
要注意一点的是,现代浏览器是通过事件的event对象的属性clipboarData来获取和操作你复制的内容,而ie则是通过window对象来获取clipboarData,所以在ie中,你可以在任何时候访问到clipboarData,而现代浏览器不行。
所以这就让我原来的一个想法消失了,我原来想做一个像淘宝一样的淘口令效果,复制后回到网页能够自动读取并跳转到对应的网页,可惜啊。
copy事件
copy事件只能设置剪贴板的内容,但是不能读取,其中设置方法有两个,一个是setData(),一个是clearData(),顾名思义,set是设置,clear则是清除。
setData()
setData需要两个参数,其中ie和现代浏览器第一个参数还有所不同。
第一个参数
ie浏览器:
类型 | 说明 |
---|---|
'Text' | 文本内容 |
'URL' | 必须是http或者https的url链接,并且也是string格式 |
现代浏览器
类型 | 说明 |
---|---|
'text/plain' | 文本内容 |
'text/html' | 带html元素的文本:'Hello, world!' |
现代浏览器就没有URL这个参数,但是多了个html参数。
第二个参数就是你要设置为的内容
string格式。
示例
//现代浏览器
e.clipboardData.setData('text/plain', 'Hello, world!');
//ie浏览器
window.clipboardData.setData('Text', 'Hello, world!');
需要注意的一点是,如果想要让setData生效,我们需要阻止默认行为。
并且,如果是jq的话,它的event对象是经过封装的,你直接通过event.clipboardData是无法访问到的,你需要这样e.originalEvent.clipboardData.setData();
使用e.originalEvent
来访问原生的event对象。
完整写法:
$('input').on("copy", function (e) {
if (!window.clipboardData) {
e.originalEvent.clipboardData.setData('text/plain', '修改的复制的内容');
} else {
window.clipboardData.setData('Text', '修改的复制的内容');
}
e.preventDefault();
})
clearData()
clearData()接受一个参数,就是你要删除的类型,类型参考setData的第一个参数。
其中现代浏览器和ie是两种不同的展现形式,因为ie是window下的clipboardData,这就表示你clearData之后,整个剪贴板都清空了,而在现代浏览器中,clearData清理的是你当时触发复制或者剪切的那段文本。
所以,在现代浏览器中,你发现粘贴的时候居然是粘贴的上一段复制的内容。
然而该方法还是要配合e.preventDefault();
所以我们完全可以通过e.preventDefault();
来达到清理的效果,不让他复制就行了,当然这个也要分场合,看需求吧!
完整写法:
$box.on("copy", function (e) {
if (!window.clipboardData) {
e.originalEvent.clipboardData.clearData('text/plain');
} else {
window.clipboardData.clearData('Text');
}
e.preventDefault();
})
注意:ie的clearData会返回布尔值,清理成功返回
true
,不成功返false
,并且他可以在paste事件中使用
cut事件
cut事件和copy一样,我们无法在这个事件里获取到你剪切的内容,但是可以设置和清除,并且也要配合e.preventDefault();
阻止默认行为还有效。
具体代码就不写了,把copy事件改为cut事件就行了。
paste事件
在paste事件中我们可以获取到剪切板的内容,但是我们不能直接去操作,比如,setData(),clearData()都是不允许的(ie可以),其中谷歌浏览器不会报错,火狐会。
但是我们可以通过阻止默认行为来达到清空的作用,比如if判断剪贴的内容如果达不到长度要求,没有某些关键词啊,就阻止默认行为。
getData()
它接受一个参数,也是类型,参考setData()第一个参数。
完整写法:
$('input').on("paste", function (e) {
console.log("paste触发")
if (!window.clipboardData) {
const value = e.originalEvent.clipboardData.getData('text/plain');
alert(value);
} else {
const value = window.clipboardData.getData('Text');
alert(value);
}
})
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
了解前端的复制功能
前言前端的复制功能第一次使用的时候还记忆犹新,那时根本不知道怎么操作,复制它到底是怎么实现的,该怎么去触发,百度查看了不知道多少所谓的复制功能文档,每篇都有不一样的用法,我总想着有一天能搞清楚这些,毕竟现在复制功能已经web功能开发中离不开了。execCommand API浏览器在document对象上暴露了execCommand方法,该方法允许使用者通过输入“命令”的方式来操作 可编辑内容区域 的元素。可编辑内容区域被官方认为是contenteditable="true"的html元素,但按道理,input这些应该也是算可编辑内容区域的。这些都不重要,我们这次关注的...

Copy 一个复制操作的类
前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...