虚拟键盘,移动web开发的痛
2016-03-06 16:37
316 查看
原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方。如下图:
如果移动端web也想做类似的功能,可以实现吗?
你可能会说着:“不就是放一个position: fixed;的输入框在页面底部嘛,有什么好难的?!”
当时我也是这么想的(⊙﹏⊙),但事实真的是这样吗?下面我们来看一些测试结果。
安卓4.2.1-qq浏览器,测试结果如下:
如图所示,输入框不见了。。。
再看看ios的safari:
为何又多了条白带?
还有,收起键盘后,为啥页面下移了。。。
好吧,其实这只是问题的冰山一角。
进入正题,怎么才能解决这些问题呢?
我们可以先从虚拟键盘入手,看看是否可以监听到呼出键盘、收回键盘这两个事件。
部分浏览器可以通过捕捉resize事件知道是否呼出收起虚拟键盘。
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是测试的结果:
iPhone 5s iOS 8.2 :
(n表示不能触发resize事件,y表示能触发resize事件)
注意: ios的UC浏览器中,点击fixed定位的输入框,呼出键盘后无法输入。
Coolpad8720Q Andorid 4.2.1
那么监听focus和blur事件又如何呢?
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html
用上述两台机器继续测试,结论如下:
ios和安卓点击输入框都会触发focus事件
ios的所有浏览器点击虚拟键盘的“完成“键或者其他方式收起键盘都会触发blur事件
安卓手机在点击”收起按钮“或者其他操作收起键盘的时候,没有触发blur事件,焦点还是在输入框上。
下面为测试截图
所以,可以采取如下方案做web评论发表框
示例页面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html
1. 除评论框以外的元素都放在一个父元素,这里父元素是main。
2. 评论框和发布按钮放在一个div里
注意: 需要在呼出键盘前,纪录下页面滚动条位置。
呼出键盘后,隐藏.main(除评论框以外的元素)。
撑高输入框,取消fixed,加入上外边距(给发表按钮留下位置)。
当输入框blur或点击取消,还原页面。
如果移动端web也想做类似的功能,可以实现吗?
你可能会说着:“不就是放一个position: fixed;的输入框在页面底部嘛,有什么好难的?!”
当时我也是这么想的(⊙﹏⊙),但事实真的是这样吗?下面我们来看一些测试结果。
安卓4.2.1-qq浏览器,测试结果如下:
如图所示,输入框不见了。。。
再看看ios的safari:
为何又多了条白带?
还有,收起键盘后,为啥页面下移了。。。
好吧,其实这只是问题的冰山一角。
进入正题,怎么才能解决这些问题呢?
我们可以先从虚拟键盘入手,看看是否可以监听到呼出键盘、收回键盘这两个事件。
部分浏览器可以通过捕捉resize事件知道是否呼出收起虚拟键盘。
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是测试的结果:
iPhone 5s iOS 8.2 :
(n表示不能触发resize事件,y表示能触发resize事件)
注意: ios的UC浏览器中,点击fixed定位的输入框,呼出键盘后无法输入。
Coolpad8720Q Andorid 4.2.1
那么监听focus和blur事件又如何呢?
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html
用上述两台机器继续测试,结论如下:
ios和安卓点击输入框都会触发focus事件
ios的所有浏览器点击虚拟键盘的“完成“键或者其他方式收起键盘都会触发blur事件
安卓手机在点击”收起按钮“或者其他操作收起键盘的时候,没有触发blur事件,焦点还是在输入框上。
下面为测试截图
所以,可以采取如下方案做web评论发表框
示例页面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html
1. 除评论框以外的元素都放在一个父元素,这里父元素是main。
<div class="main"> <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" alt=""> <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" alt=""> </div>
2. 评论框和发布按钮放在一个div里
<div class="comment"> <div class="buttons"> <button class="sure cell">发表</button> <button class="cancel cell">取消</button> </div> <textarea class="input" placeholder="我来说两句"></textarea> </div>
注意: 需要在呼出键盘前,纪录下页面滚动条位置。
呼出键盘后,隐藏.main(除评论框以外的元素)。
撑高输入框,取消fixed,加入上外边距(给发表按钮留下位置)。
当输入框blur或点击取消,还原页面。
相关文章推荐
- POJ 3061 Subsequence【尺取法】
- spring整合JMS(7)
- 蓝桥杯 — 基础练习 特殊回文数(思路+详解)
- 蓝桥杯2015省赛第6题
- Quartz2D - 下载进度条
- 让Div居中的方法
- java 中集合和数组互相转换
- 如何学习Android及如何利用Android赚钱
- 全国信息学奥林匹克联赛(NOIP2011)复赛 提高组 day2 T2 聪明的质监员
- Ubuntu 14.04 LTS环境下编译 Webkit 内核(一)
- Node.js程序中的本地文件操作用法小结
- ListView加载不同布局时的复用及原理分析
- BZOJ-1477 青蛙的约会 拓展欧几里德
- delphi中Message消息的使用方法
- 字符字节流
- BZOJ-1477 青蛙的约会 拓展欧几里德
- [Elasticsearch] 部分匹配 (三) - 查询期间的即时搜索
- 随机生成三十个四则运算算式(包含真分数)
- python GUI编程 glade+GTK+py2exe 生成exe文件
- kafka->spark->streaming->mysql(scala)实时数据处理示例