移动端H5软键盘方案弹出收起时页面不恢复的解决办法

移动端H5软键盘方案弹出收起时页面不恢复的解决办法

前几天在安卓手机上测 H5 时遇到个情况，在输入框中输入手机号，软键盘弹出，在收起时界面没有复原。反复测试了几次，有时还会出现即使焦点在输入框上，但是界面不会上滑，输入框会被遮挡的情况

上面图中界面下滑是我手动滑下去的。在苹果手机上测试，发现也会有类似的问题，

上网一搜，发现蛮多人遇到了这种情况，作为一个有强迫症的前端，为了追求更好的用户体验，不能忍！得让界面滑回去。上网一通搜索，找到比较靠谱的一个解决方案是：

通过监听软键盘的弹出与收起来手动控制界面的滑动与复原。

具体思路：当监听到软键盘弹出时，手动将输入框滑动到可视区域中间，同时记录下界面的滚动距离。当监听到软键盘收起时，再根据记录的界面滚动距离，在收起的监听里手动将界面滑动回原来的位置，将其复原。

但实际上 H5 是没有直接监听软键盘弹出收起的原生事件，需要其他方式实现，而且还需要注意 Android/IOS 在软键盘弹出时，两者页面表现是不一样的。