现在的位置: 首页 > web前端 > 正文

html5中contenteditable属性如果过滤标签

2020年07月14日 web前端 ⁄ 共 931字 ⁄ 字号 评论关闭

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


  contenteditable使用方法


  方法一:


  1<divcontenteditable="plaintext-only"id="content"></div>


  方法二:基于css


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


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


  如果在非webkit的内核,我们需要考虑使用js来实现,首先想到的是:


  1vard=document.getElementById("content");


  2document.addEventListener("keydown",function(){


  3d.innerHTML=d.innerHTML.replace(/<[^>]*>/g,"");


  4});


  发现效果同上面大体一样,这样虽然能过滤样式,但是有很多问题,比如光标始终在首位、输入框不能插入表情、换行符失效等问题。上网查了一下别人是怎么做的发现可以通过修改复制事件来过滤样式:


  contenteditable代码


  1functionpasteFilter(e){


  2e.preventDefault();


  3vartext=null;


  4//得到剪贴板中的文本


  5if(window.clipboardData&&clipboardData.setData){


  6//IE


  7text=window.clipboardData.getData('text');


  8}else{


  9try{


  10text=(e.originalEvent||e).clipboardData.getData('text/plain');


  11}catch(e){


  12return;


  13}


  14};


  总之,contenteditable给大家简单的介绍了一些,希望大家多看看。

抱歉!评论已关闭.