myzy

本人的系统是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();
        });

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

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-09-05
  • 2022-01-31
  • 2022-01-09
  • 2022-02-03
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-18
  • 2022-02-13
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案