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

查阅资料，发现若是只保证支持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);

链接: http://www.fly63.com/article/detial/381