contenteditable实现可编辑的HTML标签

标签：div   知识   nis   for   submit   兼容性   点击   outline   textarea   

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

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

在我脑海里第一时间想到的应该就是一个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这个新属性就好比一把钥匙叩开了紧闭标签的编辑大门，以后也许像我这样很可能就会用得到哦，所以写在这里分享给大家，希望大家也都能相互学习。

contenteditable实现可编辑的HTML标签

标签：div   知识   nis   for   submit   兼容性   点击   outline   textarea   

原文地址：http://www.cnblogs.com/zhaoxiaokai/p/6411757.html