最近在做一个移动端 H5 项目,内嵌webview遇到的问题
问题描述:安卓手机在 input输入框弹出时滑动页面,收回键盘时,输入框未失焦,导致页面滑动不了,点击失焦才恢复原状
目标:失焦之后,页面滚动了还能恢复到当前输入框位置
解决方式:
安卓:
resizeAndroid() {
const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
this.resizeHandler = () => {
const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
const activeElement = document.activeElement;
if (resizeHeight >= originHeight) {
// 键盘收起后逻辑 // 焦点元素滚到可视区域的问题
activeElement.scrollIntoView({ block: "center" });
}else{
//键盘弹出时处理
}
};
window.addEventListener("resize", this.resizeHandler);
}
IOS如果也遇到,可采用
resizeIos(){
let isReset = true; //是否归位
this.focusinHandler = () => {
isReset = false; //聚焦时键盘弹出,焦点在输入框之间切换时,会先触发上一个输入框的失焦事件,再触发下一个输入框的聚焦事件
};
this.focusoutHandler = () => {
isReset = true;
setTimeout(() => {
//当焦点在弹出层的输入框之间切换时先不归位
if (isReset) {
window.scroll(0, 0); //确定延时后没有聚焦下一元素,是由收起键盘引起的失焦,则强制让页面归位
}
}, 30);
};
document.body.addEventListener('focusin', this.focusinHandler);
document.body.addEventListener('focusout', this.focusoutHandler);
}
参考原文链接 :# html5 页面向上滑动(html5手机键盘弹出收起的处理)
以上仅作为个人遇到问题的一个记录,如有问题,请指出~非常感谢!!!