html5中contenteditable屬性如果過濾標簽，過濾富文本樣式

​​在div中使用contenteditable=”true”可以達到模擬輸入框的效果，但是當我們復制其他網頁內容進去的時候，會發現連帶的樣式也一起復制進去了。很明顯我們不需要復制富文本樣式，那么如何過濾這些標簽呢？

 

查閱資料，發現如果只保證支持HTML5的webkit內核瀏覽器，目前有一些方法如下：

方法一：

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

熊貓辦公 https://www.wode007.com/sites/73654.html

方法二：基於css

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

 

 

如果在非 webkit 的內核，我們需要考慮使用js來實現，首先想到的是：

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

 

發現效果同上面大體一樣，這樣雖然能過濾樣式，但是有很多問題，比如光標始終在首位、輸入框不能插入表情、換行符失效等問題。 上網查了一下別人是怎么做的發現可以通過修改復制事件來過濾樣式：

function pasteFilter(e){
    e.preventDefault();
    var text = null;
    //得到剪貼板中的文本
    if(window.clipboardData && clipboardData.setData) {
        // IE
        text = window.clipboardData.getData('text');
    }else{
        try{
            text = (e.originalEvent || e).clipboardData.getData('text/plain');
        }catch(e){
            return;
        }
    };
    if (document.body.createTextRange) {    
        if (document.selection) {
            textRange = document.selection.createRange();
        } else if (window.getSelection) {
            sel = window.getSelection();
            var range = sel.getRangeAt(0);
            // 創建臨時元素，使得TextRange可以移動到正確的位置
            var tempEl = document.createElement("span");
            tempEl.innerHTML = "&#FEFF;";
            range.deleteContents();
            range.insertNode(tempEl);
            textRange = document.body.createTextRange();
            textRange.moveToElementText(tempEl);
            tempEl.parentNode.removeChild(tempEl);
        };
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    } else {
        // Chrome之類瀏覽器
        document.execCommand("insertText", false, text);
    };
};
var d= document.getElementById( "content" );
d.addEventListener("keydown",function(e){
    if (e.ctrlKey || e.metaKey) {
        if(e.keyCode==117){
            pasteFilter(e);
        }
    }
},false);