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

1.场景

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

2.问题

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

3.原因

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

4.解决

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

   var iptBug = {
       focus: 0,
       scrollTo: function(num){
         document.body.scrollTop = document.documentElement.scrollTop = num;
       },
       getScrollTop: function(){
         return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
       },
       init: function() {
           var that = this;
           var u = navigator.userAgent;
   
           //判断当前系统是否为iOS
           if(u.indexOf('iPhone') > -1) {
               $('body').on('focus', 'input, textarea', function() {
                   iptBug.focus = 1;
               });
   
               $('body').on('blur', 'input, textarea', function() {
                   iptBug.focus = 0;
                   setTimeout(function() {
                       if(iptBug.focus == 1) {
                           return false;
                       } else {
                           that.scrollTo(that.getScrollTop());
                       }
                   }, 0)
                   // 防止在两个input间切换时做过多操作
               });
               //解决select导致的键盘弹起
               $('body').on('click','select',function(){
                   that.scrollTo(that.getScrollTop());
               });
           }
       }
   }
   
   iptBug.init();

2. 解决iOS光标错位问题
   将原来模态框的fixed布局改成absolute布局，这部分根据个人需求修改。

20200105更新

• 在iOS下模态框使用absolute+transform垂直居中，会发现模态框中的input光标消失的情况，具体原因还未深入研究，但是改成absolute+margin垂直居中可以解决问题。

参考文献

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