paste 黏贴事件

paste事件

• 在发生黏贴时触发
• 事件对象：clipboardData对象
• 获取事件对象：clipboardData = event.clipboardData || window.clipboardData

clipboardData介绍

属性	类型	说明
dropEffect	String	默认是 none
effectAllowed	String	默认是 uninitialized
files	FileList	粘贴操作为空List
items	DataTransferItemList	剪切板中的各项数据
types	Array	剪切板中的数据类型

items介绍

items是一个DataTransferItemList对象，自然里面都是DataTransferItem类型的数据了。

属性

items的DataTransferItem有两个属性kind和type:

属性	说明
kind	一般为string或者file
type	具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即MIME-Type

types介绍

types常见的值：text/plain, text/html, files

值	说明
text/plain	普通字符串
text/html	带有样式的html
files	文件(例如剪切板中的数据)

代码

<textarea style={{ width: '100%', height: '80px' }} onPaste={paste}  />
 const paste = (e) => {
    console.log(e, 99)
    let file = null
    const clipboardData = (e.clipboardData || window.clipboardData)
    // items 黏贴的list内容
    const items = clipboardData.items
    if (items.length) {

      for (let i = 0; i < items.length; i++) {
        // 判断内容type  
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          console.log(file)
        }else{
            // 可以图片外处理方法 可以处理html 和 text 内容
          var str = clipboardData.getData(items[i].type)
          console.log(str.match(/\<img\s+((?!src).)*src\s*=\s*['"]((?!['"]).)*['"][^\>]*\>/ig), 8)
          
        }
      }
    }
    
  }