解决安卓收起键盘无法触发失焦事件引发页面滚动不了问题

896 阅读1分钟

最近在做一个移动端 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手机键盘弹出收起的处理)

以上仅作为个人遇到问题的一个记录,如有问题,请指出~非常感谢!!!