【移动端web】软键盘兼容问题

软键盘收放事件


这周几天遇到了好几个关于web移动端兼容性的问题。并花了很长时间去研究如何处理这几种兼容问题。

这次我们来说说关于移动端软键盘的js处理吧。


一般情况下,前端是无法监控软键盘到底是弹出来还是关闭的。能使用的一般是输入框获取焦点事件(focus)与输入框失去焦点事件(blur)。


ios设备下,点击输入框,输入框获取了焦点,便会弹出软键盘;软键盘关闭后,输入框也能失去焦点。这点在ios下是没什么问题的。也可通过此方法来处理键盘相关问题。


但在安卓设备下,点击输入框,输入框获取了焦点,弹出软键盘没问题,但是我们关闭软件盘时,其实输入框的焦点并不会失去。因此,此方法不适合安卓。因此要使用resize。


一句话:ios使用focus、blur处理全部软键盘事件,安卓部分可处理,但可加上window的resize事件监听软键盘的打开与关闭。


点击输入框后的处理:

image.png


点击其他节点或ios关闭软键盘的处理:

image.png


安卓下,这样就能判断软键盘的收放状态了。

image.png

而ios软键盘收放不会触发resize方法,说明,ios软键盘弹出不会改变页面的高度,安卓可以。因此能解决。


软键盘问题后续加入~~


posted @ 2018-05-26 16:50  herry菌  阅读(1214)  评论(0编辑  收藏  举报