h5开发安卓机型点击输入框调起输入法，输入框被键盘遮挡的解决方法

前言：

从以前的项目中找一个问题的解决方案，顺带找到了这个安卓机型调起输入法，页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案。这个问题只有安卓机型页面中的输入框处于底部（也就是底部键盘区域）的时候才会出现，近一年的项目中很少有表单输入比较多的场景，所以一直都没碰到这种问题。现在记录下来，以后需要的时候好找些。

示例代码：

公共方法封装：

//调起输入法，键盘自动上滑
function inputUp(ele){
  //安卓机型，自动上滑露出输入框
  var u = navigator.userAgent;
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  if(isAndroid){
    $(ele).on('click', function () {
      var target = this;
      setTimeout(function(){
            target.scrollIntoViewIfNeeded();
       },100);
    });
    $(ele).on('focus', function () {
      //自动反弹 输入法高度自适应
      var winHeight = $(window).height(); //获取当前页面高度
        $(window).resize(function() {
          var thisHeight = $(this).height();
          if (winHeight - thisHeight > 50) {
            //当软键盘弹出，在这里面操作
            $('body').css('height', winHeight + 'px');
          } else {
            //当软键盘收起，在此处操作
            $('body').css('height', '100%');
          }
        });
    });
  }
}

方法使用：

vue项目为例，需要在页面渲染的时候进行调用，其中num为输入文本框的类名。一般页面顶部的文本框不需要处理，底部需要处理的所有的文本框都要调用这个方法。

1 mounted: function(){
2     common.inputUp('.num');
3 }

 

转载于:https://www.cnblogs.com/xyyt/p/11157925.html