从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要讲解了“html5中contenteditable的属性和使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5中contenteditable的属性和使用方法”吧!
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的属性和使用方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图