关闭

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

标签: div和p实现输入h5新特性前端
1740人阅读 评论(2) 收藏 举报
分类:

  啊闲来无事我又来写博客了,前段时间接了个需求是关于制作移动端的一个动画页面,其中需求方强烈要求我在项目中实现类似于微信那样的评论功能。
  最开始想着,这有啥难的,用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! 就搞定了!
  好吧就这么多了,如果还有别的更好的方法欢迎与我交流!

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12224次
    • 积分:315
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:4篇
    • 译文:0篇
    • 评论:4条
    github地址
    https://github.com/zzxboy1
    文章分类
    最新评论