一、IE能够触发onbeforepaste事件,因此可以在该事件中直接改变剪贴板中的内容实现过滤效果
二、谷歌由于不能触发onbeforepaste,先阻止默认行为,通过window.getSelection()获取光标位置,在该位置替换上处理完成的字符
具体实现代码:
1 // 输入框绑定事件 2 function addPasteEvent (ele) { 3 var isIE = isIE(); 4 // 只有IE支持beforepaste 5 if (isIE) { 6 ele.addEventListener('beforepaste', function () { 7 if(window.clipboardData){ 8 var txt = window.clipboardData.getData("text"); 9 if(txt != "" && txt != null){ 10 window.clipboardData.setData('text',val); 11 } 12 } 13 }) 14 } else { 15 // 绑定粘贴事件 16 ele.addEventListener('paste', function () { 17 if (e.originalEvent.clipboardData) { 18 // 阻止默认行为 19 e.preventDefault(); 20 var clipboardData = e.originalEvent.clipboardData; 21 // 获取剪贴板的文本 22 var text = clipboardData.getData('text'); 23 if (window.getSelection && text !== '' && text !== null) { 24 // 创建文本节点 25 var textNode = document.createTextNode(text); 26 // 在当前的光标处插入文本节点 27 var range = window.getSelection().getRangeAt(0); 28 // 删除选中文本 29 range.deleteContents(); 30 // 插入文本 31 range.insertNode(textNode); 32 } 33 } 34 }); 35 } 36 } 37 function isIE() { 38 if (!!window.ActiveXObject || 'ActiveXObject' in window) { 39 return true; 40 } else { 41 return false; 42 } 43 }
备注:(谷歌粘贴图片可以使用getAsFile() 获取到图片然后上传)