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

​​在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