手机输入框被软键盘遮住的问题

最近做登录模板,在测试的时候发现手机输入框会被软键盘遮住,遇到这个问题,我就上网百度解决办法。

然后在segmentfault上面找到了答案,代码如下。

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}

加这个方法有一个需要注意的点就是背景图绝对不能用fixed定位。所以如果背景图片必须占满屏,可以尝试用js去获取屏幕的高度,并把高度赋值给背景图的标签,栗如:

$('.login_bg').height($(window).height());

原链接地址:https://segmentfault.com/q/1010000008593521?_ea=1690131

posted @ 2017-08-22 11:03  winteronlyme  阅读(737)  评论(0编辑  收藏  举报