ios 键盘收起后弹出层焦点错位

ios 键盘收起后弹出层焦点错位

问题描述

输入框获取焦点的时候，键盘弹出，会将内容总体上移，这时弹出model的话，就会出现点击不上按钮的现象。

原理解析

• 输入框均未获取焦点的时候（键盘未弹出），显示以下图： test.png

  

• 有输入框获取焦点的时候（键盘弹出），显示以下图： test2.png

  

  此时，页面内容总体上移。

• 总体内容上移时若是须要操做和页面坐标相关的操做时，如点击model中的按钮，就会出现错位的现象，以下如所示： test3.png

  

  此时，上部的按钮才是真正点击按钮的位置所在。

解决办法

出现错位是由于内容上移而没有复原，若是手动将其复原的话，就不会出现错位的问题了。

部分参考代码

• 在input focus事件触发的时候

export default class Input {

  // 这里isKeyShow和scrollY设置成static是由于每一个input都是一个实例，而这两个状态属性只须要一个便可

  //键盘是否处于显示状态
  private static isKeyShow: boolean = false;

  //记录键盘弹出时页面滚动的位置
  private static scrollY: number = 0;

  //focus事件触发
  public focusHandle(e: object) {
    //若是键盘未弹出，须要记录此时页面滚动的位置
    if(!Input.isKeyShow){
      Input.scrollY = window.scrollY;
    }
    Input.isKeyShow = true;
  }

  //输入框失去焦点事件
  public blurHandle(e: object) {
    // 判断设备是不是ios，而且若是是ios的话，即执行
    // 这里判断设备系统的代码就不展现了
    if(judgeClient()==='ios'){
      // 设置键盘状态为不显示
      Input.isKeyShow = false;

      // 这里使用异步是由于若是其余的输入框获取到焦点的话，则能够在异步执行以前改变掉isKeyShow的值，而不至于在输入中就将页面滚动回去了
      setTimeout(() => {
        // 若是键盘此时是弹出状态的话，则不执行
        if(Input.isKeyShow)return
        // 若是键盘不是弹出状态的话，则将页面滚动到键盘弹出以前的位置
        window.scroll(0, Input.scrollY);
        Input.isKeyShow = true;
      }, 0);
    }
  }
}
复制代码