项目中遇到了这个问题,说实话 iOS 端问题挺多的,原因找起来比较简单,就是吊起键盘的时候把window的高度挤小了,然后,
关掉键盘页面高度没恢复,安卓手机会自动恢复页面高度。
原因找到了就想解决办法,刚开始想的是 iOS 它不恢复那我也没办法,这属于 iOS 的bug啊或者微信的 bug 啊,但领导不这么想,
页面显示出问题了当然得解决,就在google里翻,也是找到解决方法了,如下链接
微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案
解决方法很简单,让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); //页面向下滚动 }
原文地址:https://www.cnblogs.com/blackbentel/p/10239886.html
时间: 2024-10-06 23:40:23