用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! 就搞定了!
  好吧就这么多了,如果还有别的更好的方法欢迎与我交流!

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

相关文章推荐

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

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

如何在CHtmlView中用OnNewWindow2事件生成自己的浏览器窗口,实现类似于多标签页浏览

方式一 void CCustomHtmlView::OnNewWindow2(LPDISPATCH* ppDisp, BOOL* Cancel)  { CWebNavigate *pDlg =  n...
  • zttjhm
  • zttjhm
  • 2012-11-22 07:59
  • 1989

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

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

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

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

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

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

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

具有删除功能的下拉菜单按钮。类似于QQ登录框的用户输入框。先来看效果图:该下拉框,具有的功能为:1、编辑框和弹出的菜单具有图片功能。2、在下拉菜单中选择的菜单具有放大功能。3、编辑框具有默认图标设置功...
  • wqjsir
  • wqjsir
  • 2011-05-17 10:18
  • 3575

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

具有删除功能的下拉菜单按钮。类似于QQ登录框的用户输入框。先来看效果图: 该下拉框,具有的功能为: 1、编辑框和弹出的菜单具有图片功能。 2、在下拉菜单中选择的菜单具有放大功能。 3、编辑...

类似于京东商城等的商品分类搜索筛选功能实现

前言     随着电子商务的迅速发展,各大专业和独立蓬勃而出。如京东,凡客等为众人皆知的。作为一个技术领域的人来说,我们会更多的看到其中的技术差别。今天我们就来说一下搜索结果中的筛选功能实现。这个问...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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