天天看点

键盘遮挡输入框解决办法

onResizeMoveAZ=(moveId)=>{

      //解决安卓键盘出来手机没滑动问题

      //思路: 当键盘出现时window的高度变小了,这样我们可以判断出键盘是否出现

      //当键盘出现时候我们让页面上的最外层元素向上移动(就是margin-top:设置为负数)window高度减小的像素,当失焦的时候键盘收起来,这个时候我们把margin-top设置为0

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

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

      if (/Android/gi.test(navigator.userAgent)) {

          var windowHeight =  window.innerHeight;

          window.οnresize= 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";

              }

          }

      }

    }