我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
剪贴板事件 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);
}
})
评论(0)