Benjamin - 专注前端开发和用户体验

移动Web开发系列——软键盘及常见问题

JAVASCRIPT 移动Web开发系列 Benjamin 3375℃ 0评论

移动端软件和PC端不同,Android和iOS两个系统的处理方式各异,其中Andriod中各个厂商对软键盘的处理方式也不同.本文将从以下几个方面阐述移动端软键盘的各异.

一. 不同系统中软键盘的特点

1) iOS系统
a.如果控件在键盘高度上方的话,键盘是以一个浮层的方式弹出,并且将那个触发的控件推到键盘的上方.
b.如果控件在页面底部,键盘会覆盖该控件,系统会将整个页面向上推,直到将那个控件推到键盘上方为止.

2) Andriod系统
a.有一部分的Android的实现和iOS一样.
b.另一部分,如果发现触发的input控件比键盘的高度低的时候,会自动将整个document的高度增加,增加到这个控件的高度超过键盘的高度为止.

二. 软键盘的类型

软键盘的类型,随着H5的出现,产生了各种键盘类型,比较常见的有数字/手机/符号/email/搜索等. 现在由于不同浏览器产商对input[type=”xxx”]的实现各异,能在各浏览器中兼容的比较好的要数input[type=tel],input[type=number],但是number的时候在Andriod和iOS上UI不同.

三. 软键盘的事件

软件盘有哪些事件呢,常见的就是弹起和收起了把
1) 键盘弹起
a.iOS6之前,当控件获得focus的时候,如果不是用户触发的事件,键盘是不会弹起的.
b. 在iOS6之后,设置了一个属性(autofocus)可以做到.
c. 在Android上,只要不是用户触发的事件都无法触发.
2) 键盘的收起
可以通过js的blur的方式来实现.

四. 软键盘引发的问题及解决方案

1) JS模拟的弹窗,造成position:fixed失效问题.
a. 以我们常实现toast为例:
如果按照iOS的方式,会将整个文档往上推,则不会出现问题;
如果是将整个document动态增高,会出现toast在键盘的下面,位置不好的话,会正好出现在键盘的中间,由于键盘是在整个浏览器的上层,因此通过z-index的方式是无法将定位的元素覆盖在键盘之上的。

b. 解决方案:
方案一: 出现toast的时候,监听所有控件的事件,出现focus的时候动态计算当前位置,重新设置toast位置.也有使用isScroll.js来实现的,但是性能上确是个问题.

方案二: 初始化toast的时候,使用$(“:focus”).blur()方法,实现input失去焦点,隐藏软键盘.

2) input嵌入到过于复杂的布局中,加上比较复杂的css属性引发的问题
建议尽可能不要把input嵌入到复杂的布局中去,当使用CSS3某些高级特性时(translate,transform等),以免造成少数Andriod系统计算错误.

五. 总结

键盘的弹起,完全依赖系统和厂商的实现,我们无法定制键盘的类型,在APP端可能会更好控制一点.

PS: 上次使用脉脉软件时也发现有个input在窗口中飘的bug!!!

参考链接:
mobile-safari-autofocus-text-field
how-can-you-autofocus-on-a-form-field-in-iphone-safari

喜欢 (3)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址