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

SunZhaopeng 发布于2019-08-01 15:05 / 1502人阅读

摘要：原生的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。进入正题，怎么才能解决这些问题呢我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘收回键盘这两个事件。部分浏览器可以通过捕捉事件知道是否呼出收起虚拟键盘。

原生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

除评论框以外的元素都放在一个父元素，这里父元素是main。

评论框和发布按钮放在一个div里

呼出键盘后，隐藏.main（除评论框以外的元素)

撑高输入框，取消fixed，加入上外边距（给发表按钮留下位置）

当输入框blur或点击取消，还原页面

注意：需要在呼出键盘前，纪录下页面滚动条位置。

GPU云服务器云服务器移动web开发 web移动端开发 HTML5移动Web开发指南关闭虚拟键盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49749.html

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

摘要：原生的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。进入正题，怎么才能解决这些问题呢我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘收回键盘这两个事件。部分浏览器可以通过捕捉事件知道是否呼出收起虚拟键盘。原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。如下图： showImg(https://segmentfault.com/img/remote...

kbyyd24 2019-08-30 12:49 评论0 收藏0
虚拟键盘，移动web开发的痛

摘要：原生的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。进入正题，怎么才能解决这些问题呢我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘收回键盘这两个事件。部分浏览器可以通过捕捉事件知道是否呼出收起虚拟键盘。原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。如下图： showImg(https://segmentfault.com/img/remote...

gotham 2019-08-21 13:32 评论0 收藏0
一个神器，让写东西快得飞起

摘要：精准截图不再需要细调截图框这一细节功能真心值无数个赞相比大多数截屏软件只能检测整个应用窗口边界，对界面元素的判定让你操作时可以更加精准快捷，下面的动图就可以让你直观地感受到这个功能的强大之处。接着打开截屏的现象，将里面的显示边框宽度调整为。 ...

Dionysus_go 2021-10-14 09:42 评论0 收藏0
总结移动开发实践中遇到的坑

摘要：博主之前已经推荐了一款神器下面，就总结一下移动端遇见的坑。解决原理虚拟键盘弹出时将元素设置为，虚拟键盘消失时候设置回来。解决方案由于虚拟键盘出现并未抛出事件，而检测或者事件，皆会有一定延迟，会出现闪烁现象。做过很多移动端的项目，在开发调试过程中，一款好的调试工具会让效率大大提高。博主之前已经推荐了一款神器：http://web.jobbole.com/87587/ 下面，就总结一下移...

rockswang 2019-08-29 11:16 评论0 收藏0