解决安卓收起键盘无法触发失焦事件的问题

Posted 2023-03-18

参考技术A

最近在做一个移动端 Web 项目，在首页底部是有一个类似于 APP 导航栏（以下称 FootNav ），采用的 fixed 布局固定于底部。同时页面有一些 <input> 输入框（以下称 Input ）。

当聚焦于 Input 时，在 ios 预期效果是没问题，但是在杀千刀的 android 上，页面高度发生变化，导致 FootNav 固定在手机键盘上面，同时 FootNav 也直接挡住了输入框，交互体验非常的糟糕。

烦死了...

先了解下背景，键盘的弹出收起，在 iOS 端与 Android 端的 WebView 中表现并非一致的。

针对 Android 设备做处理就行了，iOS 无需处理。

处理方式： Input 聚焦隐藏 FootNav ，失焦时再将其显示出来 。（同理，修改布局方式也是一样的）

首先这种处理思路是没毛病的，但是...

监听页面高度的变化，利用这一点我们就可以处理 FootNav 的隐藏/显示了。

思路很简单：首先进入页面时，先记录窗口的原始高度。每当 Input 聚焦时，设置 window.onresize 函数，当窗口宽高发生改变时便会触发。

以 React 为例：

The end.