详解浏览器中的粘贴事件 paste onpaste 事件

 

在最新的H5 API里已经有了对粘贴事件的支持, 事件名为paste,     平时用的较少,但最近想做一个粘贴板管理器,于是就调研了一下这个粘贴,复制事件.

那么调研的第一步是什么那? 

当然是百度了,但高手都不百度,直接控制台调试

创建一个id为editor的文本域, 为其添加一个paste事件的监听

<textarea id="editor"></textarea>
<script>
    document.querySelector('#editor').addEventListener('paste', function(even) {
        console.log(even)
    })
</script>

 

控制台打印出来是这样的

 

处理函数的参数是even,even的数据结构如上图

明眼人一眼就能看出那个数据自己有用,其他几个属性稀松平常,唯独clipboardData这个属性比较  特殊,这是一个DataTransfer类型的数据.估计我们需要的粘贴对象就存储在这个clipboardData这个属性里面

果不其然,查阅资料后我得知,

DataTransfer这个数据类型的相关资料,尽管第一次接触这个类型,但还是很快能找到自己想要的,所以,知识的搜索能力对于一个人的成长必不可少.

如下:

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.

This object is available from the dataTransfer property of all drag events.

 

Properties

DataTransfer.dropEffect

Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be nonecopylink or move.

DataTransfer.effectAllowed

Provides all of the types of operations that are possible. Must be one of nonecopycopyLinkcopyMovelinklinkMovemoveall or uninitialized.

DataTransfer.files

Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.

DataTransfer.items Read only

Gives a DataTransferItemList object which is a list of all of the drag data.

DataTransfer.types Read only

An array of strings giving the formats that were set in the dragstart event.

 

Methods

Standard methods

DataTransfer.clearData()

Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.

DataTransfer.getData()

Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.

DataTransfer.setData()

Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.

DataTransfer.setDragImage()

Set the image to be used for dragging if a custom one is desired.

 

使用getData()方法我们可以获取自己想要的粘贴元数据,如果粘贴对象是文本,html的话可以这样获取参数,但对于文件,比如一个截图后,那么这是就要使用even.clipboardData.files 来获取了,这里获取的是一个文件列表. 可以直接上传到服务器,不过要想在Chrome中预览你的截图,那就需要使用另外一个类了,FileReader 

根据这个DataTransfer类的解释我们不难得出,这个东西主要是用于drop  drag两个事件里多用

以下这个是文本粘贴的数据 可以使用even.clipboardData.getDate('text/plain') 获取粘贴的数据

 

完整代码.复制截图到富文本编译域里

 

<!DOCTYPE html>
<html>

<head>
   <title>富文本编辑器</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <div class="edit-wrap">
      <div id="editor" contenteditable="true" class="edit-textarea" style="height: 300px;width:500px;margin:20px auto;border:1px solid #ddd"></div>
      <img id="myimg" src=""/>



      <script>
         document.querySelector('#editor').addEventListener('paste', function(even,value){
            console.log(even.clipboardData.files)

            let file = even.clipboardData.files[0]

            let fileReader = new FileReader();  // 文件解读器


            fileReader.onloadend = function() {
               document.querySelector('#myimg').src = fileReader.result // 将读取后的base64
            }

            fileReader.onerror = function(err) {
               console.log(err)
            }

            fileReader.readAsDataURL(file) // 读取一个文件返回base64地址

         })
      </script>
</body>

</html>

相关文献参考链接 ClipboardEvent   DataTransfer

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页