基于js粘贴事件paste的示例分析-创新互联

这篇文章给大家分享的是有关基于js粘贴事件paste的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

公司主营业务：网站建设、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出石嘴山免费做网站回馈大家。

目前只有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="https://cache.yisu.com/upload/information/20200622/114/66116.jpg" alt="大妈们在雅西高速上跳广场舞 被警察及时阻止"/>

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

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

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

感谢各位的阅读！关于“基于js粘贴事件paste的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前名称：基于js粘贴事件paste的示例分析-创新互联
当前地址：https://www.cdcxhl.com/article34/dijope.html

成都网站建设公司_创新互联，为您提供App开发、电子商务、用户体验、网站排名、全网营销推广、Google

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容