专栏首页前端小叙js粘贴事件paste简单解析及遇到的坑

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

在用户执行粘贴操作的时候,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类型的数据了。

属性

itemsDataTransferItem有两个属性kindtype

属性

说明

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/plaintext/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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js文件中模块化导入swiper.js文件方法

    蓓蕾心晴
  • javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示

    蓓蕾心晴
  • vue实现文章内容过长点击阅读全文功能

    直接上代码: html: <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :clas...

    蓓蕾心晴
  • 右键没有新建文本文档选项

    用户2657851
  • sqllite入门笔记

    目前,几乎所有版本的 Linux 操作系统都附带 SQLite。所以,只要使用下面的命令来检查您的机器上是否已经安装了 SQLite。

    深浅无解
  • K8S 生态周报| Istio 已修复导致 Pod 崩溃的 bug

    该 bug 可能会导致 在使用 Istio 1.6.6 时,某些 Pod 进入 CrashLoopBackOff 状态,无法正常提供服务。

    Jintao Zhang
  • 复旦教授徐英瑾:人工智能研究为何需要哲学参与? (下)

    人工智能哲学作为一个行当,在国内基本上是还没有确立起来。总体来说国外的情况比我们好一点,马马虎虎算一个哲学分支。

    腾讯研究院
  • ClickHouse多盘存储配置

    长期以来,ClickHouse-Server是一个访问单个存储设备上数据的进程,这样的设计提供了操作简便性,却无法将机器的磁盘硬件资源充分利用,且将用户的数据限...

    garyhwang
  • 深度残差收缩网络(一)背景知识

    深度残差收缩网络(Deep Residual Shrinkage Network)是深度残差网络(Deep Residual Network, ResNet)的...

    用户6831054
  • 谈谈React中Diff算法的策略及实现

    keyWords

扫码关注云+社区

领取腾讯云代金券