iOS光标错位以及微信页面不回弹问题

本文永久链接

场景

1. 正常文档流中出现的input；
2. fixed定位的模态框中含有input；

问题

1. 微信iOS 6.7.4 —— 微信iOS 7.0.1？，在软键盘收回后，页面不回弹；
2. iOS 11 —— iOS 11.3，输入框获取焦点后，弹出软键盘，而输入光标错位；Bug 176896

原因

1. 微信iOS 6.7.4版本引入的bug，目前（7.0.1）未修复
2. iOS 11 —— iOS 11.3引入的bug，目前（12.1.2）已修复

解决

1. 解决微信页面不回弹问题
   在输入框失去焦点时，对页面进行重绘操作

var iptBug = {
  focus: 0,
  blur: 1,
  init: function() {
    $('body').on('focus', 'input', function() {
      iptBug.focus = 1;
      iptBug.blur = 0;
    });

    $('body').on('blur', 'input', function() {
      iptBug.focus = 0;
      iptBug.blur = 1;
      setTimeout(function() {
        if(iptBug.focus == 1) {
          return false;
        } else {
          document.body.scrollTop = document.body.scrollTop;
        }
      }, 0)
      // 防止在两个input间切换时做过多操作
    });
  }
}

iptBug.init();

2. 解决iOS光标错位问题
   将原来模态框的fixed布局改成absolute布局，这部分根据个人需求修改，后续会更新到文章模态框

参考文献

• EFE|Web移动端Fixed布局的解决方案