一、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() 获取到图片然后上传)

posted on 2018-11-08 14:24  百科全输  阅读(3395)  评论(0编辑  收藏  举报