contenteditable实现可编辑的HTML标签

时间:2021-12-31 22:21:29

最近工作中遇到了一个小问题,让我学到了新的标签属性——contenteditable。

我需要实现的是手机端界面,特别简单的一个页面,如下图;

contenteditable实现可编辑的HTML标签

在我脑海里第一时间想到的应该就是一个form表单然后里面包裹着一个textarea标签这么简单吧,心想着这个界面顶多用十分钟就能搞定。

然后打开编辑器我就开始写了,代码如下;

<form class='textbox' action="" method="post">
  <textarea name="" rows="10" cols="20">请写下您的描述</textarea>
<input type="submit" name="finish" id="finish" value="完成" />
  <input type="button" name="cancel" id="cancel" value="取消" />
</form>

简单写好样式以后就打开浏览器切换到手机模式下跑一下,结果一眼就发现了问题所在,textarea标签的宽高不能自适应......我用自己所学过狭隘的知识探索并尝试过一番之后发现......还是百度一下吧(/(ㄒoㄒ)/~~)

搜索结果第一条就是HTML5全局contenteditable属性,以前没见过这个属性就打开看了一下,竟然发现比较简单而且很好用。

contenteditable这个属性是如此的好玩,在HTML标签后面增加这个属性并赋予属性值为true,死死的标签竟神奇般的可以编辑了,而且兼容性很好(IE6已经脱节所以没做测试),后来想了想可能用到这个应该有QQ空间吧,打开看了下果然不是textarea,用的是一个div增加contenteditable的属性实现的。

借助着新认识的属性和简单的css样式很快实现了我想要的效果,当你用的时候发现光标点击开始编辑的时候会有边框,而简单的border:none并不能实现清除边框的作用,这个时候给标签添加一组简单的样式代码就可以了:

-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;

outline:none;

contenteditable这个新属性就好比一把钥匙叩开了紧闭标签的编辑大门,以后也许像我这样很可能就会用得到哦,所以写在这里分享给大家,希望大家也都能相互学习。