在移动端,当点击输入框时,弹出软键盘,页面被顶上去一截,当输入完毕失去焦点,软键盘关闭时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中使用
本文介绍了一个常见问题的解决方案:在移动端,当软键盘关闭时,iOS设备上的页面高度不会自动恢复,而安卓设备则能自动调整。文章提供了一种通过触发页面滚动来修复iOS上此问题的方法。
7372

被折叠的 条评论
为什么被折叠?



