很多项目里面会用到复制和粘贴两个功能,但是我平时也用不到,这里就详细学习一下是怎么运作的。

剪贴板事件了解

剪贴板有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);
    }
  })
分类: JavaScript 标签: 剪贴板事件copycutpaste

评论

暂无评论数据

暂无评论数据

目录