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


Posted in Javascript onSeptember 07, 2017

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

目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持ChromeSafari,一些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事件,但是相关事件很多,继续摸索中....

以上这篇基于js粘贴事件paste简单解析以及遇到的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
redux-saga 初识和使用
Mar 10 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JS 基本概念详细介绍
Oct 16 Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
基于require.js的使用(实例讲解)
Sep 07 #Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
You might like
PHP多线程抓取网页实现代码
2010/07/22 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
php session_decode函数用法讲解
2019/05/26 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
vue.js的安装方法
2017/05/12 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
Python中除法使用的注意事项
2014/08/21 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
提高EJB性能都有哪些技巧
2012/03/25 面试题
大学生求职推荐信
2013/11/27 职场文书
优秀员工个人的自我评价
2013/11/29 职场文书
土建资料员岗位职责
2014/01/04 职场文书
煤矿安全承诺书
2014/05/22 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
编写python程序的90条建议
2021/04/14 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js