场景

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

问题

  1. iOS 12下的微信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();
  1. 解决iOS光标错位问题
    将原来模态框的fixed布局改成absolute布局,这部分根据个人需求修改,后续会更新到文章模态框

参考文献

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注