ios 微信键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案
问题:测试发现ios微信端浏览器中,键盘弹出后,输入框被软键盘遮挡,input失焦后,因软键盘顶起的页面没有回弹到原来位置,需手动滑动一下页面才可以恢复;android端没有发现这个问题
原因:ios对fixed支持并不是很好,ios12+,微信6.7.4版本存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标位置错乱,再次点击输入框区域时无法focus
解决方法:监听键盘事件,页面自动滚动到原来位置
直接上代码,直奔主题
// 软键盘弹起时,解决输入框被遮挡
document.body.addEventListener('focusin', (e) =>{
var timer1 = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight;
clearInterval(timer1);
}, 100)
})
// 软键盘消失后,解决页面无法回弹
document.body.addEventListener('focusout', (e) =>{
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
var currentPosition, timer2;
var speed = 1;
timer2 = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer2);
}, 1);
}
}
})
亲测,苹果x,ios12,完美解决问题,欢迎讨论留言!