html5中contenteditable属性若是过滤标签，过滤富文本样式-成益经验网

html5中contenteditable属性若是过滤标签，过滤富文本样式

作者：QQ979

围观群众：61

更新于 2023-02-12 16:55:57

查阅资料，发现若是只保证支持HTML5的webkit内核浏览器，现在有一些方式如下：

方式一：

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

方式二：基于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);