如何在注册表单中避免使用浏览器预填充字段？

Question

autocomplete="off"不是我追求的.基本上,在我的注册表上,有一个字段"电话"和"密码"一个放在另一个之上.(见截图)

令人烦恼的是,"电话"字段预先填充了用户名,因为我猜浏览器正在做什么 - 浏览器找到一个类型为password的字段,并假定文本输入字段就在它是用户名字段之前.效果是这样的:

为什么我对手机字段的非标准自动完成属性不感兴趣,我希望用户能够尽可能轻松地填写此表单,如果他们之前已在其他网站上输入了他们的电话号码(在称为字段中) "电话")当他们开始在场上打字时,他们可以从中受益.这就是为什么我不想完全关闭自动完成功能.

我正在更多地考虑重组字段以避免这种行为.或者某种方式告诉浏览器密码字段上方的字段与其无关,或者密码字段不用于验证目的.以某种方式标记它.或者在这两个字段之间注入一些不可见的元素？

有任何想法吗？

标记使用:

<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">

我在Chrome,FF上得到了这种行为(不确定IE,在我的机器上得到了一个古老的版本,甚至不想开始担心IE.)

Answer 1

大多数密码管理器将搜索第一个密码字段,并在其前面搜索最接近的文本字段.

所以你要做的就是display:none在"新密码"上面添加不可见的文本和密码字段().

Firefox 尝试将3个密码字段解释为"更改密码"操作,因此如果您不希望这样做,则应该安全地添加另一个不可见的密码字段.

Answer 2

我在设置密码字段时遇到了类似的问题.尝试

<input type="password" autocomplete="new-password">

从MDN 输入文档:

自动完成

此属性指示浏览器是否可以自动完成控件的值.

可能的值是:

.... new-password:新密码(例如创建帐户或更改密码时)

对于电话号码问题,我设置了它并停止自动填充那里的用户名.

<input type="tel">