在移动端,当点击输入框时,弹出软键盘,页面被顶上去一截,当输入完毕失去焦点,软键盘关闭时ios上页面高度没恢复,安卓手机会自动恢复页面高度。
解决方法: 在输入框失去焦点后(关闭键盘)让页面滚一下
- 非框架搭建的页面
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中使用