H5 页面在 IOS 上短信验证码点击一次会自动填充两次 bug 解决

2020-09-03T10:48:00

更新内容

有网友说是微信内置浏览器的问题,而并非系统之过。用我自己的 IOS 13.6 系统版本的苹果手机测试了一下,并不准确。

浏览器自动填充次数
微信内置浏览器2
Safari1
QQ 浏览器2
搜狗浏览器2
Chrome2

另外,由于获取验证码页面在授权登录(这里用的 QQ 授权)之后,UC 和 夸克因为众所周知的原因,无法调起 QQ 授权登录,测试不了;Firefox(火狐)调起后,返回参数错误;百度调起提示 QQ 版本过期(当前 QQ 已是应用商店最新版本)。

得出结论:

相同网站,除自带的 Safari 浏览器,微信内和其他测试的浏览器获取验证码都自动填充了两次。

本着法不责众的原则,这锅 IOS 系统得背!

问题描述

主要场景:IOS 的 H5 页面短信验证码点击一次会自动填充两次。

不确定 Android 的 H5 页面是否存在(Android 是否有自动填充功能),但在 APP 上未发现这样的情况(应该没有吧)。

网上找到的解释:

iOS12 新增一个功能就是可以自动填充验证码,当你点击键盘上面的验证码时,如果这时你监听了UITextFieldTextDidChangeNotification,那么这时你会收到两个相同的回调。

我苹果手机现在的版本已经是 13.6 了,但这个问题依然存在。

每次都要删除一次短信验证码,这个功能肯定备受吐槽。

为什么会收到两个相同的回调?IOS 系统会自动填充一次,那么另外一次填充是谁做的呢?

解决方法

  • 根据验证码长度限制输入框长度
<input type="text" name="code" maxlength="6" placeholder="请输入验证码"/>

这方法确实简便又合理。你自动输入两次,我给你限制输入字符串长度,只允许输入一次,那么问题自然迎刃而解。

还有一种说法是,关闭自动填充。我的理解是 autocomplete="off",测试发现并没有起作用。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »