1、IE可以觸發onbeforepaste事件,所以能夠在該事件中直接改變剪貼板中的內容實現過濾效果spa
2、谷歌因爲不能觸發onbeforepaste,先阻止默認行爲,經過window.getSelection()獲取光標位置,在該位置替換上處理完成的字符code
具體實現代碼:blog
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() 獲取到圖片而後上傳)事件