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

站长手记作者： 2024-08-28 09:55:01

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

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

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

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.jiecseo.com/news/show_70060.html