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

来源: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'> <!--这里的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 }, }