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

时间:2023-03-10 02:14:29
【移动端web】软键盘兼容问题
软键盘收放事件

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

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

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

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

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

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

点击输入框后的处理:

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

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

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

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

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

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

软键盘问题后续加入~~