虚拟键盘，移动web开发的痛_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了虚拟键盘，移动web开发的痛_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2590字，纯文字阅读大概需要4分钟。

内容图文

如果移动端web也想做类似的功能，可以实现吗？

你可能会说着：“不就是放一个position: fixed;的输入框在页面底部嘛，有什么好难的？!”

当时我也是这么想的(⊙﹏⊙)，但事实真的是这样吗？下面我们来看一些测试结果。

安卓4.2.1－qq浏览器，测试结果如下：

如图所示，输入框不见了。。。

再看看ios的safari：

为何又多了条白带？

还有，收起键盘后，为啥页面下移了。。。

好吧，其实这只是问题的冰山一角。

进入正题，怎么才能解决这些问题呢？

我们可以先从虚拟键盘入手，看看是否可以监听到呼出键盘、收回键盘这两个事件。

测试页： 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

用上述两台机器继续测试，结论如下：

1. ios和安卓点击输入框都会触发focus事件
2. ios的所有浏览器点击虚拟键盘的“完成“键或者其他方式收起键盘都会触发blur事件
3. 安卓手机在点击”收起按钮“或者其他操作收起键盘的时候，没有触发blur事件，焦点还是在输入框上。

下面为测试截图

所以，可以采取如下方案做web评论发表框

示例页面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html

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

1 
2      3      4 

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

1 
2     
3         发表4         取消5     
6     7 

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

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

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

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

内容总结

以上是互联网集市为您收集整理的虚拟键盘，移动web开发的痛_html/css_WEB-ITnose全部内容，希望文章能够帮你解决虚拟键盘，移动web开发的痛_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端