移动端点击输入框，键盘把底部的内容顶起

今天遇到这样一个问题：手机端输入表单信息时，键盘把底部的按钮顶起，这样就把一部分表单遮盖住了。
详情如下图：


可以看到，详细地址被遮盖住了，这样的用户体验肯定不好，解决办法如下：
通过将实时屏幕高度和默认屏幕高度进行比较，如果实时屏幕的高度大于默认屏幕高度，就将按钮隐藏，否则就显示按钮。
具体实现如下：
1.将底部设置为fixed

    <div class="footer" v-show="hidshow">
      <a @click="save">保存地址</a>
    </div>
    
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.3rem;
  border-top: 1px solid #e0e0e0;
  background: #ffffff;

  a {
    display: block;
    margin: 0.18rem auto;
    text-align: center;
    width: 95%;
    height: 0.9rem;
    line-height: 0.9rem;
    border-radius: 0.45rem;
    font-size: 0.28rem;
    color: #fff;
    background-color: #17C169;
  }
}

2.在data中定义两个高度，分别是实时屏幕高度和默认屏幕高度

  data () {
    return {
      docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
      showHeight: document.documentElement.clientHeight,   //实时屏幕高度
      hidshow:true  //显示或者隐藏footer
    };
  },

3.在mounted里面进行监听

  mounted(){
    // window.onresize监听页面高度的变化
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.body.clientHeight;
        })()
    }
  },

4.用watch监控比较，判断按钮是否显示出来

  watch:{
    showHeight:function() {
        if(this.docmHeight > this.showHeight){
            this.hidshow=false
        }else{
            this.hidshow=true
        }
    }
  }

这样就能很好的解决移动端点击输入框，键盘把底部的内容顶起这个问题了。

感谢我以为你不在乎这位朋友的帮助。