锚点设置: <a href="#1">锚点</a> <a name="1"></a> table表格格式: <table width="100" height="100" border="1"
顺晟科技
2022-09-15 21:01:49
289
一、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() 获取到图片然后上传)
15
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09
15
2022-09