方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）

1、原生页面

const windowHeight = window.innerHeightinput.addEventListener('blur', function () { let windowFocusHeight = window.innerHeight if (windowHeight == windowFocusHeight) { return } console.log(windowHeight + '--' + windowFocusHeight); console.log('修复'); let currentPosition; let speed = 1; //页面滚动距离 currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); //页面向上滚动 currentPosition += speed; //speed变量 window.scrollTo(0, currentPosition); //页面向下滚动 })

2、vue框架可以写全局指令，然后在输入框上加指令就行了

//解决ios输入框弹出的收起，底部空白问题const windowHeight = window.innerHeightVue.directive('fixedInput', function (el, binding) { el.addEventListener('blur', function () { let windowFocusHeight = window.innerHeight if (windowHeight == windowFocusHeight) { return } console.log(windowHeight + '--' + windowFocusHeight); console.log('修复'); let currentPosition; let speed = 1; //页面滚动距离 currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); //页面向上滚动 currentPosition += speed; //speed变量 window.scrollTo(0, currentPosition); //页面向下滚动 })})

使用：加v-fixedInput指令

<input type="number" name="" placeholder="请输入房价总额" v-model="totalPrice" v-fixedInput @input="changeTotalPrice($event.target.value)" />

参考文章：https://www.cnblogs.com/blackbentel/p/10239886.html