在用户执行粘贴操作的时候， js 能够获得剪切板的内容，本文讨论一下这个问题。

目前只有 Chrome 支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持 Chrome 和 Safari ，一些 Chrome 的新特性是可以尽情使用了，还是能够覆盖到大部分用户的。所以本文只讨论 Chrome 如何使用和如何阻止 Safari ，原理大概了解了，再研究其他浏览器相关的问题就容易多了。

paste 事件

可以用 js 给页面中的元素绑定 paste 事件的方法，当用户鼠标在该元素上或者该元素处于 focus 状态，绑定到 paste 事件的方法就运行了。

绑定的元素不一定是 input ，普通的 div 也是可以绑定的，如果是给 document 绑定了，就相当于全局了，任何时候的粘贴操作都会触发。

事件对象

获取事件对象

先写一下事件绑定的代码

pasteEle.addEventListener("paste", function (e){
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
});

粘贴事件提供了一个 clipboardData 的属性，如果该属性有 items 属性，那么就可以查看 items 中是否有图片类型的数据了。 Chrome 有该属性， Safari 没有。

clipboardData 介绍

介绍一下 clipboardData 对象，它实际上是一个 DataTransfer 类型的对象， DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。

clipboardData 的属性介绍

items 介绍

items 是一个 DataTransferItemList 对象，自然里面都是 DataTransferItem 类型的数据了。

属性

items 的 DataTransferItem 有两个属性 kind 和 type

方法

在原型上还有一些其他方法，不过在处理剪切板操作的时候一般用不到了。

types 介绍

一般 types 中常见的值有

text/plain、text/html、Files

简单demo

pasteEle.addEventListener("paste", function (e){
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return ;
    for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
        var item = e.clipboardData.items[i];
        if (item.kind === "string") {
            item.getAsString(function (str) {
                // str 是获取到的字符串