移动端键盘挡住输入框

方法一：监听输入框onClick事件，修改div的高度并设置scrollTop滚动位置，在onBlur 输入框失焦事件中，将div高度还原并设置scrollTop为0

   //防止键盘把当前输入框给挡住
   $('input[type="text"],input[type="password"]').on('click', function () {
       if(window.screen.height == $('.Login').height()){
           let backHeight = $('.Login').height()+100;
           $('.Login').height(backHeight);
         }
            $("body,html").animate({ scrollTop: 60 }); //带动画效果
       });
       //input失焦事件
       $('input[type="password"]').blur(function(){
          if($('.Login').height() > window.screen.height){
              $('.Login').height(window.screen.height);
              $("body,html").animate({ scrollTop: 0 }); //带动画效果
          }
    });

解决方法二：

  // android手机
        var winHeight = $(window).height(); // 获取当前页面高度
        $(window).resize(function() {
            var resizeHeight = $(this).height();
            if (winHeight - resizeHeight > 50) {
                // 软键盘弹出
                $('body').css('height', winHeight + 'px');
                // weui.topTips('软键盘弹出---------------- ')
            } else {
                //软键盘收起
                $('body').css('height', '100%');
                // weui.topTips('软键盘收起--------------- ')
            }
        });

 

转载于:https://my.oschina.net/linxiaoxi1993/blog/3041160