您的位置：首页 > Web前端 > JavaScript

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

2017-09-06 15:08 453 查看

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

属性类型说明
dropEffectString默认是 none
effectAllowedString默认是 uninitialized
filesFileList粘贴操作为空List
itemsDataTransferItemList剪切板中的各项数据
typesArray剪切板中的数据类型 该属性在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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航