IOS cursor dislocation and wechat page does not rebound

Time:2021-7-6

IOS cursor dislocation and wechat page does not rebound

Original address: https://segmentfault.com/a/1190000021491989
Author: FW Dragon
This article starts at: think no

1. Scene

  1. Input in normal document flow;
  2. The mode box of fixed location contains input;

2. Problems

  1. Wechat IOS 6.7.4 – wechat IOS 7.0.1?, After the soft keyboard is retracted, the page does not rebound;
  2. IOS 11 — IOS 11.3, after the input box gets the focus, the soft keyboard pops up, and the input cursor is misplaced; Bug 176896

3. Reasons

  1. The bug introduced by wechat IOS version 6.7.4 has not been fixed at present (7.0.1)
  2. IOS 11 – the bug introduced by IOS 11.3 has been fixed (12.1.2)

4. Solution

  1. Solve the problem that wechat page does not rebound
    When the input box loses focus, redraw the page

    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;
    
            //Judge whether the current system is 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)
                    //Prevent too many operations when switching between two inputs
                });
                //Solve the keyboard bounce caused by select
                $('body').on('click','select',function(){
                    that.scrollTo(that.getScrollTop());
                });
            }
        }
    }
    
    iptBug.init();
  2. Solve the problem of IOS cursor dislocation
    The fixed layout of the original modal box is changed to absolute layout, which is modified according to personal needs.

Update 20200105

  • In IOS, if you use absolute + transform to center the modal box vertically, you will find that the input cursor in the modal box disappears. The specific reason has not been deeply studied, but it can be solved by changing absolute + margin to center the modal box vertically.

Update 20200508

  • After the layout is changed to absolute, it works well when there is only one input box in the modal box, but when there are multiple input boxes in one modal box (such as pop-up login scene), there will still be dislocation when switching to the second input box( (unresolved)

reference

  • Efe|solution for fixed layout of web mobile terminal