what

世界这么大, 码农却都差不多。

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

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

/*监听input状态,屏幕滚动到input,上下居中
 *在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。
 *然后定位到input框。
 */
window.addEventListener('resize', function () {
    if(document.activeElement.tagName === 'INPUT'){
        document.activeElement.scrollIntoView({behavior: "smooth"})
    }
 })

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

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

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013100581/article/details/77337768
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭