欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-01-01 21:19:16
...
原生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

用上述两台机器继续测试,结论如下:

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

下面为测试截图

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

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

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

1 
2 虚拟键盘,移动web开发的痛_html/css_WEB-ITnose3 虚拟键盘,移动web开发的痛_html/css_WEB-ITnose4

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

1 
2
3 4 5
6 7

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

呼出键盘后,隐藏.main(除评论框以外的元素)。

撑高输入框,取消fixed,加入上外边距(给发表按钮留下位置)。

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

上一篇:

下一篇: