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);
    }
  }
}