contenteditable实现可编辑的HTML标签

最近工做中遇到了一个小问题，让我学到了新的标签属性——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这个新属性就比如一把钥匙叩开了紧闭标签的编辑大门，之后也许像我这样极可能就会用获得哦，因此写在这里分享给你们，但愿你们也都能相互学习。