剪贴板事件 copy、cut、paste

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

剪贴板事件了解

剪贴板有6个事件，其中现代浏览器火狐只支持三个，ie和谷歌则支持全部。

其中火狐浏览器只支持 copy，cut，paste三个事件。

其中ie和谷歌浏览器的话是都支持的，并且在ie中使用右键菜单进行复制剪切粘贴的操作，事件会触发多次，而在现代浏览器中，你复制一次，只会触发一次copy事件和beforecopy事件这种，哪怕是右键菜单触发。

那么为了兼容性，我们只了解三个事件就行了。

要注意一点的是，现代浏览器是通过事件的event对象的属性clipboarData来获取和操作你复制的内容，而ie则是通过window对象来获取clipboarData，所以在ie中，你可以在任何时候访问到clipboarData，而现代浏览器不行。

所以这就让我原来的一个想法消失了，我原来想做一个像淘宝一样的淘口令效果，复制后回到网页能够自动读取并跳转到对应的网页，可惜啊。

copy事件

copy事件只能设置剪贴板的内容，但是不能读取，其中设置方法有两个，一个是setData()，一个是clearData()，顾名思义，set是设置，clear则是清除。

setData()

setData需要两个参数，其中ie和现代浏览器第一个参数还有所不同。

第一个参数

ie浏览器：

现代浏览器

现代浏览器就没有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);
    }
  })