星空网 > 软件开发 > 网页设计

虚拟键盘,移动web开发的痛

原生APP的弹出虚拟键盘和收回虚拟键盘,输入框始终贴在虚拟键盘的上方。如下图:

虚拟键盘,移动web开发的痛

如果移动端web也想做类似的功能,可以实现吗? 
你可能会说着:“不就是放一个position: fixed;的输入框在页面底部嘛,有什么好难的?!” 
当时我也是这么想的(⊙﹏⊙),但事实真的是这样吗?下面我们来看一些测试结果。
安卓4.2.1-qq浏览器,测试结果如下:
虚拟键盘,移动web开发的痛
如图所示,输入框不见了。。。
 
再看看ios的safari:
虚拟键盘,移动web开发的痛
为何又多了条白带?
还有,收起键盘后,为啥页面下移了。。。
好吧,其实这只是问题的冰山一角。
进入正题,怎么才能解决这些问题呢?

我们可以先从虚拟键盘入手,看看是否可以监听到呼出键盘、收回键盘这两个事件。
部分浏览器可以通过捕捉resize事件知道是否呼出收起虚拟键盘。
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是测试的结果:
 
iPhone 5s iOS 8.2 : 
(n表示不能触发resize事件,y表示能触发resize事件)
虚拟键盘,移动web开发的痛
注意: ios的UC浏览器中,点击fixed定位的输入框,呼出键盘后无法输入。
 
Coolpad8720Q Andorid 4.2.1
 虚拟键盘,移动web开发的痛
那么监听focus和blur事件又如何呢?
 
测试页: http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html
 
用上述两台机器继续测试,结论如下:
  1. ios和安卓点击输入框都会触发focus事件
  2. ios的所有浏览器点击虚拟键盘的“完成“键或者其他方式收起键盘都会触发blur事件
  3. 安卓手机在点击”收起按钮“或者其他操作收起键盘的时候,没有触发blur事件,焦点还是在输入框上。

下面为测试截图


虚拟键盘,移动web开发的痛
 
虚拟键盘,移动web开发的痛
 
所以,可以采取如下方案做web评论发表框
 
示例页面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html
 
1.  除评论框以外的元素都放在一个父元素,这里父元素是main。
1 <div class="main">2   <img src='/images/loading.gif' data-original="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" >3   <img src='/images/loading.gif' data-original="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" >4 </div>


2. 评论框和发布按钮放在一个div里
1 <div class="comment">2   <div class="buttons">3     <button class="sure cell">发表</button>4     <button class="cancel cell">取消</button>5   </div>6   <textarea class="input" placeholder="我来说两句"></textarea>7 </div>


注意: 需要在呼出键盘前,纪录下页面滚动条位置。
呼出键盘后,隐藏.main(除评论框以外的元素)。
撑高输入框,取消fixed,加入上外边距(给发表按钮留下位置)。
当输入框blur或点击取消,还原页面。



虚拟键盘,移动web开发的痛




原标题:虚拟键盘,移动web开发的痛

关键词:web

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境电商有几家:https://www.goluckyvip.com/tag/36553.html
跨境电商有哪些:https://www.goluckyvip.com/tag/36554.html
跨境电商有哪些岗位:https://www.goluckyvip.com/tag/36555.html
跨境电商有哪些课程:https://www.goluckyvip.com/tag/36557.html
FBA卖家:https://www.goluckyvip.com/tag/3656.html
跨境电商有哪些税:https://www.goluckyvip.com/tag/36562.html
23点聊电商:新质生产力加速数字贸易发展 卓尔智联集团实现营收利润双增长 :https://www.kjdsnews.com/a/1836411.html
南京浦口都有什么好玩的地方 南京浦口都有什么好玩的地方推荐:https://www.vstour.cn/a/363180.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流