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

原创 2016年08月29日 11:07:57

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

vuejs组件分享H5图片上传、压缩,拍照旋转

处理问题   这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候   1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到...
  • xwqqq
  • xwqqq
  • 2016年12月31日 22:12
  • 2716

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能

html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能 图片上传 上传图片: ...
  • linlzk
  • linlzk
  • 2015年09月22日 15:34
  • 16143

Ztree实现异步加载-并在input标签弹窗--类似select的DIV窗口实现即选即显。

本Tree,是基于在一个弹框的div中以easyui为框架+Ztree的技术,做的一个异步加载,即选即现的一个例子。 实现的功能: 1、点击某DIV以外的区域,隐藏/关闭本DIV。 2、点击一个...

类似淘宝评价流式标签功能实现

  • 2017年10月23日 15:39
  • 4.12MB
  • 下载

给表的某个字段添加table check的功能(字段有input help的选择,类似于search help)

最近自己新建了一个选择屏幕的structure,然后用户需要在选择屏幕的地方添加一个类似于search help的功能(刚开始并没有解除table check的功能),去参照标准的structure后...

Python 实现类似PHP的strip_tags函数功能,并且可以自定义设置保留标签

最近在研究 Python ,发现用的还是很不习惯,很多PHP里面很简单的功能在Python 里面都得找半天,而且很多功能都得自己实现。 今天做个采集,需要过滤内容中的标签,搞了一下午,貌似终于搞出来...

实现类似网易邮箱的标签页功能

1.效果图如下: 2.代码如下: CRM xmlns="http://www.w3.org/1999/xhtml">     实现类似网易邮箱的标签页功能     ...

具有删除功能的下拉菜单按钮。类似于QQ登录框的用户输入框

具有删除功能的下拉菜单按钮。类似于QQ登录框的用户输入框。先来看效果图:该下拉框,具有的功能为:1、编辑框和弹出的菜单具有图片功能。2、在下拉菜单中选择的菜单具有放大功能。3、编辑框具有默认图标设置功...
  • wqjsir
  • wqjsir
  • 2011年05月17日 10:18
  • 3670
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用div和p标签实现类似于input标签的输入功能
举报原因:
原因补充:

(最多只允许输入30个字)