本人的系统是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(); });
这样下面的内容就不会滚动 了