正文

js粘贴事件paste简单解析及遇到的坑

IP云
IP云V管理员/58 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在用户执行粘贴操作的时候， 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 的属性介绍

属性 类型 说明
dropEffect String 默认是 none
effectAllowed String 默认是 uninitialized
files FileList 粘贴操作为空List
items DataTransferItemList 剪切板中的各项数据
types Array 剪切板中的数据类型 该属性在Safari下比较混乱

items 介绍

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

属性

items 的 DataTransferItem 有两个属性 kind 和 type

属性 说明
kind 一般为 string 或者 file
type 具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即 MIME-Type

方法

方法 参数 说明
getAsFile 空 如果 kind 是 file ，可以用该方法获取到文件
getAsString 回调函数 如果 kind 是 string ，可以用该方法获取到字符串，字符串需要用回调函数得到，回调函数的第一个参数就是剪切板中的字符串

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

types 介绍

一般 types 中常见的值有 

text/plain、text/html、Files
值 说明
text/plain 普通字符串
text/html 带有样式的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 是获取到的字符串

            })

        } else if (item.kind === "file") {

            var pasteFile = item.getAsFile();

            // pasteFile就是获取到的文件

        }

    }

});

注意如果是 string 类型的数据，可能针对具体是 text/plain 、 text/html 进行分别的处理。

以上摘自:这里]

坑在这里

根据亲自测验,遇到了一个很大的坑,暂时还不知道该怎么解决:

当ctrl+c复制图片并粘贴之后,clipboaddata的

DataTransferItem {kind: "string", type: "text/html"}

即输出的str: 

<meta http-equiv="content-type" content="text/html; charset=utf-8"><img src="http://img1.gtimg.com/cd/pics/hv1/154/103/2237/145487344.jpg" alt="大妈们在雅西高速上跳广场舞 被警察及时阻止"/>

当右键复制图片并粘贴之后,

DataTransferItem {kind: "file", type: "image/png"}

所以这里对于图片如果想要获取粘贴的图片进行上传,只有直接右键复制的图片才能识别到,ctrl+c的并不能识别.....

最近自己在研究看能不能通过复制任意地方的图片,粘贴到本地富文本编辑器窗口,粘贴自动上传,这里研究了一下paste事件,但是相关事件很多,继续摸索中.......

===========================================================2017.11.7 更新

http://www.cnblogs.com/beileixinqing/p/7800189.html

相关阅读

目录[+]