JavaScript paste事件解析与图片粘贴差异处理

paste事件概述

当用户执行粘贴操作时，JavaScript可以获取剪切板的内容，本文将对此进行探讨。

当前仅Chrome浏览器支持获取剪切板中的图片数据。鉴于目前需要此功能的产品主要支持Chrome和Safari，且可以利用Chrome的一些新特性，这足以覆盖大部分用户群体。因此，本文仅讨论Chrome中paste事件的使用方法及如何阻止Safari的相关行为。理解其基本原理后，再研究其他浏览器的相关问题便会更加容易。

paste事件概述

可以通过JavaScript为页面中的元素绑定paste事件。当鼠标位于该元素上或该元素处于焦点状态时，绑定的paste事件处理函数将会执行。

绑定的元素并不局限于input标签，普通的div元素同样可以绑定。若将事件绑定到document对象上，则相当于实现了全局监听，此时任何粘贴操作都会触发该事件。

事件对象与clipboardData详解

事件对象详解

如何获取事件对象

首先展示事件绑定的基础代码。

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

简单示例代码

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复制图片并粘贴后，clipboarddata中的

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事件，但由于涉及的相关事件较多，仍在继续探索中。

以上关于JavaScript粘贴事件paste的简单解析及遇到的坑的全部内容分享给各位，希望能为读者提供参考，也希望大家多多支持本站。