问题
由项目需求 只能在手机微信浏览打开h5页面
在登录界面。输入账号时,ios手机软键盘反复闪烁
原因
因为微信浏览器的重绘行为;
简单理解就是,自ios11开始,苹果手机的浏览器就有了自动填充密码的功能,
具体来说就是一个手机号密码登录的页面,ios识别到当前页面有密码输入框,所以触发了自动填充密码的功能。
解决方案
- autoComplete="off" 和 autoComplete="new-password" (遗憾不生效)
// 设置`autocomplete`为`off`,适用于普通文本框
<input type="text" autoComplete="off"/>
// 设置`autocomplete`为`new-password`,适用于密码输入框
<input type="password" autoComplete="new-password"/>
⚠️ 我查了很多资料,好多博主都是这样解决的。但是目前我测试的情况看,没啥用;具体原因在这 时间问题我没怎么研究,有兴趣的学生可以看下
- <input type="text" value="" style=" opacity: 0; width: 0;height: 0; /> (本人在用)
<input type="number" v-model="phone" placeholder="请输入手机号" autoComplete="off" />
<input type="text" value="" style=" opacity: 0; width: 0;height: 0; " />
<input type="password" v-model="password" autoComplete="new-password" placeholder="请输入密码" />
总结
账号密码相邻的输入框会引发ios的自动密码填充,需要对其进行阻断,在账号和密码之间设置一个隐藏的input 去阻断账号密码之间的联动
完美解决!