手机内的页面,在点击输入框的时候,会弹出软键盘。在苹果手机上,会自动定位输入框在屏幕上下居中(软键盘和页面顶部之间可见的屏幕)。但是安卓手机不会定位,所以要处理下安卓手机的情况。
/*监听input状态,屏幕滚动到input,上下居中
*在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。
*然后定位到input框。
*/
window.addEventListener('resize', function () {
if(document.activeElement.tagName === 'INPUT'){
document.activeElement.scrollIntoView({behavior: "smooth"})
}
})
这个方法最好在高版本手机app内,或者浏览器内。因为方法还是属于试验中功能。
兼容性详情请见:点击这里
以上方法是结合百度,还有看了部分先人的代码,然后根据自己的业务写的。有需要的同学可以根据自己的业务修改代码。
如有错误,请大神指点,thanks