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

原文地址：https://segmentfault.com/a/1190000021491989
作者：Fw恶龙
本文首发于：思否

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垂直居中可以解决问题。

20200508更新

• 改成absolute布局后，对于模态框中只有一个输入框的情况可以良好运行，但是在一个模态框中有多个输入框（如：弹窗登录场景），在切换至第二个输入框时还是会出现错位的情况。（未解决）

参考文献

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