paste 黏贴事件

373 阅读1分钟

paste事件

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

clipboardData介绍

属性类型说明
dropEffectString默认是 none
effectAllowedString默认是 uninitialized
filesFileList粘贴操作为空List
itemsDataTransferItemList剪切板中的各项数据
typesArray剪切板中的数据类型

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)
          
        }
      }
    }
    
  }