平武建站

html5中contenteditable的属性和使用方法-创新互联

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

专注于为中小企业提供网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业合山免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

contenteditable使用方法

方法一：

1

方法二：基于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的属性和使用方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！


名称栏目：html5中contenteditable的属性和使用方法-创新互联
URL标题：http://pwwzsj.com/article/dipsoe.html

其他资讯