移动端软件和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

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。