键盘遮挡输入框解决办法

来源:互联网 发布:卡通人物制作软件 编辑:程序博客网 时间:2024/04/29 22:51

onResizeMoveAZ=(moveId)=>{


      //解决安卓键盘出来手机没滑动问题
      //思路: 当键盘出现时window的高度变小了,这样我们可以判断出键盘是否出现
      //当键盘出现时候我们让页面上的最外层元素向上移动(就是margin-top:设置为负数)window高度减小的像素,当失焦的时候键盘收起来,这个时候我们把margin-top设置为0

      //当然如果要向上滑动的效果就得在元素样式上加过度属性

     //moveid 为需要移动元素的id




      if (/Android/gi.test(navigator.userAgent)) {
          var windowHeight =  window.innerHeight;
          window.onresize= function(){
              var viewHeight = window.innerHeight;  // 可视区域底部
              if(viewHeight < windowHeight ){
                  var num = viewHeight-windowHeight;
                  document.getElementById(moveId).style.marginTop = num+"px";
              }else
                  document.getElementById(moveId).style.marginTop = "0px";
              }
          }
      }
    }