H5底部输入框兼容手机虚拟键盘

H5底部输入框兼容手机虚拟键盘遮挡问题总结

概述

业务场景：内嵌APP的手机聊天页面，输入框absolute定位在底部，由于fixed定位在ios机型上表现混乱，所以没有选用fixed定位。

安卓手机表现：虚拟键盘弹起，输入框不会被遮挡，但页面不会随着虚拟键盘的弹起而向上移动，聊天区域被遮挡。

IOS手机表现：虚拟键盘弹起，页面被虚拟键盘的高度推起，有很大概率输入框被遮挡。

解决方案

通用设置

页面加载之后记录初始视口高度，安卓机型直接用window.innerHeight可以准确获取，但由于ios中使用window.innerHeight高度计算有时不正确，所以采用screen.height来动态的计算高度。

• iphoneX的视口高度为screen.height-78

• 其他iphone机型的视口高度为screen.height-20

安卓机型

1. 监听window.resize事件，设置100毫秒延时执行，在回调中通过window.innerHeight再次获得视口高度，当初始视口高度-当前视口高度>0时，则判断虚拟键盘弹起，否则虚拟键盘落下。

2. 虚拟键盘弹起时，设置聊天内容区高度，并将聊天气泡滚动到底部。

3. 虚拟键盘落下时，还原聊天内容区高度。

IOS机型

1. ios机型中监听window.resize事件无效，所以监听输入框的focusin，延时400毫秒来判断虚拟键盘弹出。

2. 通过js bridge来获得虚拟键盘高度，但由于iphoneX机型中虚拟键盘的高度是包括手机系统中的底部控制栏的，所以要将计算高度减去34方可得到正确的虚拟键盘高度，用虚拟键盘高度来动态计算输入框的top值，并将bottom值设为auto，同时设置聊天内容区高度，并将聊天气泡滚动到底部。

3. 监听focusout事件，延时100毫秒，判断虚拟键盘落下，还原页面。