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

Fw恶龙

木木枭-呐喊

原文地址: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布局后,对于模态框中只有一个输入框的情况可以良好运行,但是在一个模态框中有多个输入框(如:弹窗登录场景),在切换至第二个输入框时还是会出现错位的情况。(未解决)

参考文献

阅读 2.3k

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

191 声望
11 粉丝
0 条评论

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

191 声望
11 粉丝
文章目录
宣传栏