用div和p标签实现类似于input标签的输入功能

　　啊闲来无事我又来写博客了，前段时间接了个需求是关于制作移动端的一个动画页面，其中需求方强烈要求我在项目中实现类似于微信那样的评论功能。

　　最开始想着，这有啥难的，用input标签不就能做么，在评论按钮使用jquery的

trigger()

方法再触发这个input标签不就行了么！ 于是我自信满满的接了活，开始飞快的码代码，结果写到一半脑子一动，input标签好像不能像聊天窗那样自动换行吧，大胸弟。。结果一试，果然！



　　我瞬间懵逼了，还好我比较机智，一行不行我就多行，textarea走起！我把row设成5，这不就可以显示5行了么，纳尼！为啥一出来就是就是三行的高度，人家评论可是自适应高度的啊！我写死高度。好像有不能自适应了，这就为难了尼玛。好吧经过思考和查阅，终于发现了h5有一个神奇的属性叫做

contenteditable

，将它设置为true的时候，元素的内容就可以编辑了！但是它有一点点小BUG，就是使用focus()方法获焦时，光标往往在元素首部，不在输入文本的末尾。而且当你使用浮动时，有可能会发现光标出现在了输入框之外，这就需要range对象了（[请参照我的另外一篇关于range对象的博客]。(http://blog.csdn.net/zzxboy1/article/details/52228346)）。

　　

　　


　　

　


　

　　另外还有一个BUG伤了我好久就是用trigger来使文本框来获得焦点，当使用focus方法时()发现触发按钮的

touchend事件

没办法使输入框获得焦点，最后思考了半天，发现是

touchend事件

的默认行为在作怪！最后一句return false！ 就搞定了！

　　好吧就这么多了，如果还有别的更好的方法欢迎与我交流！