移动端常见问题记录

[Lenny-Hu]

ios 键盘输入卡或无法输入

现象： IOS中input失焦后，点击没反应的问题。 原因：在弹出层点击input时调起键盘，页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。

addKeyboardEvent () {
    //  现象： IOS中input失焦后，点击没反应的问题
    // 在弹出层点击input时调起键盘，页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。
    let u = navigator.userAgent;
    let flag;
    let timer;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    let focusinCb = () => { //软键盘弹起事件
      flag = true;
      clearTimeout(timer);
    };
    let focusoutCb = () => {//软键盘关闭事件
      flag = false;
      if (!flag) {
        timer = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); //重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
        }, 200);
      }
    };

    if (isIOS) {
      document.body.addEventListener('focusin', focusinCb, false);
      document.body.addEventListener('focusout', focusoutCb, false);
    }
    // 返回销毁事件函数
    return function () {
      document.body.removeEventListener('focusin', focusinCb, false);
      document.body.removeEventListener('focusout', focusoutCb, false);
    }
  }

// 使用
let removeKeyboardEvent = utils.addKeyboardEvent();
// 销毁事件绑定
removeKeyboardEvent();