html5 富文本样式,科技常识：html5中contenteditable属性如果过滤标签 过滤富文本样式...

今天小编跟大家讲解下有关html5中contenteditable属性如果过滤标签 过滤富文本样式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5中contenteditable属性如果过滤标签 过滤富文本样式 的相关资料，希望小伙伴们看了有所帮助。

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

查阅资料 发现如果只保证支持html5的webkit内核浏览器 目前有一些方法如下：

方法一：

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

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。