html5中contenteditable的属性和使用方法

这篇文章主要讲解了“html5中contenteditable的属性和使用方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5中contenteditable的属性和使用方法”吧！

　　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};

感谢各位的阅读，以上就是“html5中contenteditable的属性和使用方法”的内容了，经过本文的学习后，相信大家对html5中contenteditable的属性和使用方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！