h5 IOS微信浏览器input输入账号键盘闪烁

问题

由项目需求 只能在手机微信浏览打开h5页面
在登录界面。输入账号时，ios手机软键盘反复闪烁

原因

因为微信浏览器的重绘行为；
简单理解就是，自ios11开始，苹果手机的浏览器就有了自动填充密码的功能，
具体来说就是一个手机号密码登录的页面，ios识别到当前页面有密码输入框，所以触发了自动填充密码的功能。

解决方案

1. autoComplete="off" 和 autoComplete="new-password" （遗憾不生效）

// 设置`autocomplete`为`off`,适用于普通文本框
<input type="text" autoComplete="off"/>
// 设置`autocomplete`为`new-password`，适用于密码输入框
<input type="password" autoComplete="new-password"/>

⚠️ 我查了很多资料，好多博主都是这样解决的。但是目前我测试的情况看，没啥用；具体原因在这 时间问题我没怎么研究，有兴趣的学生可以看下

2. <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 去阻断账号密码之间的联动

完美解决！