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