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

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

作者: 宇cccc | 来源:发表于2017-07-20 20:44 被阅读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)
                })
            }
        }
    

    即可解决问题.

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/edbjkxtx.html