1. Ios系统bug,自动关联手机验证码时,会复制重复的验证码
解决方法:
因为公司的验证码都是指定的位数,所以设置input的maxlength
即可解决。
2.Ios系统当键盘弹起,再收回的时候,页面底部会留白
解决方法
//这里监听键盘收起,然后滚动顶部
document.body.addEventListener('focusout', () => {
//软键盘收起的事件处理
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent))
//键盘收齐页面空白问题
document.body.scrollTop = document.body.scrollHeight;
}
})
以上方法确实可以解决问题,但是我的页面里使用了swiper插件做整屏切换,且第二屏可滚动查看,设置document.body.scrollTop
会使第二屏页面滚动到最顶部,且有多个输入框,所以我用了另一个方法:
$('.input_text'').on('focusout', function (e) {
$(this).removeClass('focus')
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
setTimeout(function () {
if(!$('.focus').length){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
},100)
}
$('.input_text'') .on('focus',function () {
$(this).addClass('focus')
})
3.在H5页面上fixed定位了一个弹框,但是在ios 12.1系统遇到了焦点乱跑的问题。
每当点击键盘的“完成”按钮时,页面看起来所有输入框都失焦,然后点击任意输入框,焦点只会聚焦到上次完成时的下一个输入框。
比如当我输入完手机号,点击键盘的“完成”按钮,然后我想改一下姓名,但是点击姓名的输入框,焦点反而跑到了验证码那一栏。
这种神奇的的bug也是无语,将弹框的定位改成position:absolute
就解决了该问题,看来Ios对fixed的兼容性并不是很友好,在移动端H5页还是少用fiexd定位。