做微商如何网站推广,企业网站建设联系,移动网站开发工具,软件下载类型网站怎么做1、效果实现 1.1、做法
容器监听paste事件。原生js则document.addEventListener(paste)#xff0c;vue则paste 监听paste事件的回调函数有个参数e#xff0c;获取e.clipboardData粘贴的文字信息 e.clipboardData.getData(text/plain)粘贴的图片信息 e.clipboard…1、效果实现 1.1、做法
容器监听paste事件。原生js则document.addEventListener(paste)vue则paste 监听paste事件的回调函数有个参数e获取e.clipboardData粘贴的文字信息 e.clipboardData.getData(text/plain)粘贴的图片信息 e.clipboardData.items[0].getAsFile() 或者 e.clipboardData.files[0] 1.2、注意事项
记得阻止浏览器默认粘贴行为e.preventDefault();粘贴图片时控制台打印e.clipboadData发现files、items为空于是望而却步了 其实files、items里面是有值的 files可以直接访问而items不能直接访问需要通过getAsFile()去访问获取到的是一个File对象
有些浏览器可能不能获取到clipboadData的数据兼容性写法 const event e || e.originalEvent 文本event.clipboardData.getData(text/plain) 图片event.clipboardData.items[0].getAsFile() event.clipboardData.files[0] 2、代码
!DOCTYPE html
htmlheadmeta charsetutf-8title粘贴/titlestyle.inputField{padding:0 5px;width: 200px;height: 50px;line-height: 50px;box-sizing: border-box;border: 1px solid gray;cursor: pointer;}/style/headbodydiv classinputField contenteditable/divscriptconst inputField document.querySelector(.inputField)inputField.addEventListener(paste, (e){console.log(e:, e.clipboardData.getData(text/plain))e.preventDefault();console.log(item:, e.clipboardData.items[0].getAsFile())console.log(item:, e.clipboardData.files[0])})/script/body
/html
