标签：func 变化 变量 tin 软键盘 显示 top fixed 怎么
项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是吊起键盘的时候把window的高度挤小了，然后，
关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。
原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，
页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接
解决方法很简单，让window滚动下就可以恢复window的高度了。
第一种方法，在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中
的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）
1. 非框架搭建的页面
const windowHeight = window.innerHeight
input.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 所以就写了全局指令，在输入框上加下就可以了，指令代码如下
const windowHeight = window.innerHeight
Vue.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); //页面向下滚动
})
})
2. 监听window 的 resize 事件，当页面高度发生变化时滚动window，也就不用每个input都做处理了，但是有定时器，但凡有定时器的代码本人一般都不怎么用，
代码如下（按理也可以解决select 导致的底部留白）
const windowHeight = window.innerHeight
var windowScrollTimer = null
window.addEventListener(‘resize‘, function () {
console.log(windowHeight);
if (windowScrollTimer) {
return
}
let windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
return
}
windowScrollTimer = setInterval(() => {
windowFocusHeight = window.innerHeight
if (windowHeight == windowFocusHeight) {
clearInterval(windowScrollTimer)
windowScrollTimer = null
return
}
console.log(windowHeight + ‘--‘ + windowFocusHeight);
console.log(‘修复‘);
fixInputBugs()
}, 100)
})
function fixInputBugs () {
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); //页面向下滚动
}
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
标签：func 变化 变量 tin 软键盘 显示 top fixed 怎么
原文地址：https://www.cnblogs.com/blackbentel/p/10239886.html
