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

670 阅读1分钟

问题

ios系统,h5中,登录页面,写了账号和密码表单,在输入账号时,唤起ios自带数字键盘,点击键盘输入数字时,键盘下的内容一直闪动。 image.png

原因

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

解决办法

账号密码相邻的输入框会触发ios的自动密码填充,需要对其进行阻断,在账号和密码之间设置一个隐藏的input去阻断账号密码之间的联动,代码如下:

<input type="number" v-model="phone" placeholder="请输入手机号"/>
<input style="width:0;height:0;overflow:hidden;" />
<input type="password" v-model="password" placeholder="请输入密码" />