解决安卓手机H5页面input获得焦点时页面挤压或者底部上移

最新推荐文章于 2024-05-11 10:59:10 发布

宇cccc

最新推荐文章于 2024-05-11 10:59:10 发布

阅读量8.7k

点赞数 1

分类专栏： html5问题文章标签： h5安卓手机问题

本文链接：https://blog.csdn.net/ytongc/article/details/75541386

版权

html5问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在安卓手机上，如果底部有一个定位的元素比如一个input 或者一个 footer 在正常情况下是没有问题的,
但是一旦input获得焦点,那么定位元素会被软键盘向上推,ios手机没有问题
此时解决办法如下:
先判断手机类型,因为如果不判断的话 ios会被影响

    window.onload = function () {
        var u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
            //  拿到获取焦点的input
            let input = document.querySelector('input')
            input.addEventListener('focus', function () {
                setInterval(function () {
                // 核心
                    input.scrollIntoView(false);
                }, 200)
            })
        }
    }