移动端解决输入框唤起键盘时将底部按钮顶起问题

来源:https://blog.csdn.net/weixin_42017221/article/details/134171629

问题描述：移动端输入框输入内容时会唤起键盘，而这个时候键盘会把固定页面底部的按钮给顶起来遮掩住输入框，给用户造成不好的体验
解决思路：
1、首次进入页面加载原始高度，存起来
2、在按钮中添加v-if判断focusShow（首次加载为true）
3、监听键盘事件，当键盘唤起时，再次获取高度
4、当前高度和原始高度相差一定像素时，将focusShow改为false,隐藏按钮

核心代码：

<template>
  <div class="ckdjBox">
    <van-form ref='form'>
      <van-field
        v-model='value1'
        label="数字验证:"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入内容' }]"
       />
    </van-form>
    <f7-toolbar class="tabs-with-toolbar" v-if="focusShow">
      <van-button type="primary" block @click="submit">提交</van-button>
    </f7-toolbar>
  </div>
</template>
<script>
export default {
	data () {
	  return {
		oldHeight: "",
		focusShow: true,
		value1:"",
	  }
	},
	watch:{
      oldHeight:{
        handler(newVal,oldVal){
          window.onresize = () =>{
          	//this.oldHeight原始高度
          	//window.outerHeight键盘唤起后的高度
            if(this.oldHeight - window.outerHeight > 60){
            	//改变focusShow 值
              this.focusShow = false
            }else{
              this.focusShow = true
            }
          }
      },
      deep: true
    }
  },
  mounted () {
  	// window.outerHeight为屏幕高度，存入oldHeight 
    this.oldHeight = window.outerHeight
  },
}
</script>