部分安卓手机点击输入框,输入法会将输入框遮住问题

在写移动端页面时候在乐视手机测试时,点击输入框,输入框无法自动调整到可视区域,并且输入法挡住了输入框,在其他苹果和安卓手机上测试是可以自动移动到可视区域的

上网找了一些方法:
1、scrollIntoView(true | false) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。如果当前元素在视窗中可见,这个方法不做任何处理。如果将可选参数alignCenter设置为true,则表示尽量将元素显示在视窗中部(垂直方向)Safari、Chrome实现了这个方法

这个两个方法,乐视手机并不支持第二个,所以只能用第一个方法,使用过后,所有手机点击输入框都是以浏览器顶部对齐,我们想要的只是改变乐视手机浏览的问题,其他手机不做处理

后来又在网上找了一些方法

/*input、textarea等输入框被输入法遮罩的解决方法*/

var clientHeight=document.body.clientHeight;
var focusElem=null;  //输入框的焦点
//利用捕获事件来监听输入框等的focus
document.body.addEventListener('focus',function(e){
    focusElem=e.target||e.srcElement;
},true);
//因存在软键盘显示而屏幕大小还没改变,所以以屏幕大小改变为准
window.addEventListener('resize',function () {
    if (focusElem&&document.body.clientHeight//焦点元素滚动到可视范围底部(false为底部)
        focusElem.scrollIntoView(false);
    }
});

经过实践,发现乐视手机依然很蛋疼,当你点击输入框,弹起输入法的时候,页面并不会触发resize,但是在其他手机上是可以触发的,并且我换了2个输入法,依然没有效果。

最后解决的办法

1、首先我先用 navigator.userAgent.toLowerCase()来区别是否是乐视的手机

部分安卓手机点击输入框,输入法会将输入框遮住问题_第1张图片

2、判断是乐视手机后,再使用scrollIntoView(true),将输入框移动到页面顶端,再使用window.scrollBy(0,-100);将页面向下移动100像素,完成

贴上代码

    $('#input').on('focus',function(){
        var ua = navigator.userAgent.toLowerCase();
        if (/le x620/.test(ua)) {
            input.scrollIntoView(true);
            window.scrollBy(0,-100);
            console.log($(window).scrollTop())
        }
    });

如果各位有更好的方法,欢迎提供,谢谢

你可能感兴趣的:(移动端问题)