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

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

1、原始代码

<template>
	<div class="ckdjBox">
      <van-form ref='form'>
      <!--这里的rules可以加正则判断如下：-->
      <!--:rules="numRules"-->
        <van-field
            v-model='value1'
            label="数字验证:"
            placeholder="请输入"
            :rules="[{ required: true, message: '请输入内容' }]"
        />
      </van-form>
      <f7-toolbar class="tabs-with-toolbar">
        <van-button type="primary" block @click="submit">提交</van-button>
      </f7-toolbar>
    </div>
<template/>
export default {
	data () {
		return {
			value1:"",
			// 整数验证
      		telRules6: [{
        		required: true,
        		message: '信息不能为空',
        		trigger: 'onBlur'
      		}, {
        		validator: value => {
        			//这个正则验证是以1-9之间的任意数字开头，后面可以跟随任意个0-9之间的数字或者0开头
          			return /^(0|[1-9][0-9]*)$/
              		.test(value)
        		},
        		message: '请输入整数',
        		trigger: 'onBlur'
      		}],
		}
	}
}

2、问题描述

当在移动端唤起键盘时，手机键盘会把底部按钮顶起,如下所示

3、解决问题思路

1、首次进入页面加载原始高度，存起来
2、在按钮中添加v-if判断focusShow（首次加载为true）
3、监听键盘事件，当键盘唤起时，再次获取高度
4、当前高度和原始高度相差一定像素时，将focusShow改为false,隐藏按钮

4、代码实现

<template>
	<div class="ckdjBox">
      <van-form ref='form'>
      <!--这里的rules可以加正则判断如下：-->
      <!--:rules="numRules"-->
        <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/>
export default {
	data () {
		return {
			//原始高度
			oldHeight: "",
			focusShow: true,
			value1:"",
			// 整数验证
      		telRules6: [{
        		required: true,
        		message: '信息不能为空',
        		trigger: 'onBlur'
      		}, {
        		validator: value => {
        			//这个正则验证是以1-9之间的任意数字开头，后面可以跟随任意个0-9之间的数字或者0开头
          			return /^(0|[1-9][0-9]*)$/
              		.test(value)
        		},
        		message: '请输入整数',
        		trigger: 'onBlur'
      		}],
		}
	},
	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
  },
}