iphone11系统输入框的光标位置不正常

本人的系统是11.3的是正常的，却发现测试机的11.1和11.2的光标位置在输入框的下边。百度一下，很多人有同样的问题，在此记录一下

解决办法一：

//弹框弹出后执行如下代码

  $('body').css({'position': 'fixed', 'width': '100%'});

//弹框关闭后执行如下代码

  $('body').css({'position': 'relative'});

但是我发现这样的写法，每次点输入框时需要点击两点才能显示光标

解决办法二：

后来又找到了另一种办法

    userName.on('focus',function(){

            mask.attr('style','display:flex;position:absolute;');

            $('html').addClass('noscroll');

        })

        userPhone.on('focus',function(){

            $('html').addClass('noscroll');

            mask.attr('style','display:flex;position:absolute;')

        });

        userPhone.on('blur',function(){

            mask.attr('style','display:flex;position:fixed;')

            $('html').removeClass('noscroll');

        })

        userName.on('blur',function(){

            mask.attr('style','display:flex;position:fixed;')

            $('html').removeClass('noscroll');

        })

    }

在input的focus和blur设置postion;因为出现光标位置不正常是因为iphOne不能很好的解析position是fixed

对应的css

.noscroll,

.noscroll body {

    overflow: hidden;

}

.noscroll body {

    position: relative;

}

在此基础上优化

    $('.mask').on('touchmove', function(event) {

            event.preventDefault();

        });

这样下面的内容就不会滚动了

巴特西

iphone11系统输入框的光标位置不正常

最新文章

热门文章