html5中contenteditable属性如果过滤标签，过滤富文本样式

2020-06-06 16:56:46 阅读：400 来源： 互联网

标签：tempEl contenteditable text 过滤 html5 clipboardData var document textRange

在div中使用contenteditable=”true”可以达到模拟输入框的效果，但是当我们复制其他网页内容进去的时候，会发现连带的样式也一起复制进去了。很明显我们不需要复制富文本样式，那么如何过滤这些标签呢？

查阅资料，发现如果只保证支持HTML5的webkit内核浏览器，目前有一些方法如下：

方法一：

1 <div contenteditable="plaintext-only" id="content"></div>

熊猫办公 https://www.wode007.com/sites/73654.html

方法二：基于css

1 user-modify: read-write-plaintext-only;   
2 -webkit-user-modify: read-write-plaintext-only

如果在非 webkit 的内核，我们需要考虑使用js来实现，首先想到的是：

1 var d= document.getElementById( "content" );
2 document.addEventListener( "keydown", function() {
3     d.innerHTML = d.innerHTML.replace( /<[^>]*>/g, "" );
4 });

发现效果同上面大体一样，这样虽然能过滤样式，但是有很多问题，比如光标始终在首位、输入框不能插入表情、换行符失效等问题。上网查了一下别人是怎么做的发现可以通过修改复制事件来过滤样式：

 1 function pasteFilter(e){
 2     e.preventDefault();
 3     var text = null;
 4     //得到剪贴板中的文本
 5     if(window.clipboardData && clipboardData.setData) {
 6         // IE
 7         text = window.clipboardData.getData('text');
 8     }else{
 9         try{
10             text = (e.originalEvent || e).clipboardData.getData('text/plain');
11         }catch(e){
12             return;
13         }
14     };
15     if (document.body.createTextRange) {    
16         if (document.selection) {
17             textRange = document.selection.createRange();
18         } else if (window.getSelection) {
19             sel = window.getSelection();
20             var range = sel.getRangeAt(0);
21             // 创建临时元素，使得TextRange可以移动到正确的位置
22             var tempEl = document.createElement("span");
23             tempEl.innerHTML = "&#FEFF;";
24             range.deleteContents();
25             range.insertNode(tempEl);
26             textRange = document.body.createTextRange();
27             textRange.moveToElementText(tempEl);
28             tempEl.parentNode.removeChild(tempEl);
29         };
30         textRange.text = text;
31         textRange.collapse(false);
32         textRange.select();
33     } else {
34         // Chrome之类浏览器
35         document.execCommand("insertText", false, text);
36     };
37 };
38 var d= document.getElementById( "content" );
39 d.addEventListener("keydown",function(e){
40     if (e.ctrlKey || e.metaKey) {
41         if(e.keyCode==117){
42             pasteFilter(e);
43         }
44     }
45 },false);

标签：tempEl,contenteditable,text,过滤,html5,clipboardData,var,document,textRange
来源： https://www.cnblogs.com/ypppt/p/13055317.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html5中contenteditable属性如果过滤标签，过滤富文本样式