H5输入框获取焦点,软键盘弹出会遮挡表单问题

时间:2021-09-09 18:34:30

手机内的页面,在点击输入框的时候,会弹出软键盘。在苹果手机上,会自动定位输入框在屏幕上下居中(软键盘和页面顶部之间可见的屏幕)。但是安卓手机不会定位,所以要处理下安卓手机的情况。

/*监听input状态,屏幕滚动到input,上下居中
*在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。
*然后定位到input框。
*/

window.addEventListener('resize', function () {
if(document.activeElement.tagName === 'INPUT'){
document.activeElement.scrollIntoView({behavior: "smooth"})
}
})

这个方法最好在高版本手机app内,或者浏览器内。因为方法还是属于试验中功能。
兼容性详情请见:点击这里

以上方法是结合百度,还有看了部分先人的代码,然后根据自己的业务写的。有需要的同学可以根据自己的业务修改代码。

如有错误,请大神指点,thanks