监听粘贴事件实现禁止向输入框或可修改元素内粘贴图片

第一步:为目标元素添加paste监听事件

第二步:获取dom对象,过滤图片文件等

     pasteWatcher(event) {
            let e = event || window.event
            // 阻止默认粘贴
            // e.preventDefault()
            let types = event.clipboardData.types
            // 粘贴事件有一个clipboardData的属性,提供了对剪贴板的访问
            let flag = false
            if (types && types.length > 0) {
                types.forEach(ele => {
                    if (ele == 'Files') {
                        flag = true
                    }
                })
            }

            if (flag) {
                event.preventDefault()
            }
        },

注意:控制台打印event.clipboardData.types属性可能为空,不用理睬,实际上已经获取到数据。

posted @ 2021-03-02 16:52  试问蟾宫  阅读(377)  评论(0编辑  收藏  举报