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

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 tries to interpret 3 password fields作为“更改密码”操作，因此如果您不希望这样，您应该安全地添加另一个不可见的密码字段。

Answer 2

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

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

来自MDN input文档：

  

自动填充

     

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

     

可能的值是：

     

.... new-password：新密码（例如，在创建帐户或更改密码时）

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

<input type="tel">

Answer 3

家庭电话号码不能是30个字符，这可能是因为浏览器假设它可能是用户名或登录电子邮件的原因。把它改成真实的东西，看看会发生什么。

另外，考虑为电话号码，区号，前缀，后缀设置3个字段。填充一定数量的数字后，您可以使用JavaScript自动对焦下一个电话段字段，以便用户更轻松。

您是否也尝试过更改字段的位置？发生了什么事？

另外，为了确保您可以在注册期间关闭特定项目的自动完成，而不必担心在登录期间它会关闭（因为它不会），除非您为登录字段关闭它，当然你没有必要。

此外，删除未使用的已保存表单自动完成的内容，可能只是您的版本的本地问题，您可能在其中一个浏览器中输入了错误值，然后您安装了其他浏览器（chrome或FF） ），然后新安装的浏览器完全按原样从原始浏览器复制规则....所以，你最终认为它是你的表单的全局问题，只是因为一个错误的条目，因为你的第二个安装的浏览器被复制并从你的第一个浏览器复制了错误的输入规则，让它看起来像一个真正的，普遍的问题，给我？因此，请尝试使用浏览器InPrivate模式，或尝试使用其他安装或不同计算机的浏览器，或者尝试使用虚拟PC实例。

否则，从浏览器导出所有设置并卸载两个浏览器，然后从头开始重新安装FF和chrome，然后测试您的网页，然后随意导回您导出的设置。

另外，对IE进行测试，即使它是为了给你的洞察力，知道我的意思吗？

希望这会有所帮助，让我知道你如何继续，如果你有任何其他问题。

<强>更新

根据您选择的方法，您应该能够做的是，在呈现手机字段时，在输入标记中添加value =“”属性，而不是使用JavaScript。这应该可以防止在不需要使用javascript的情况下发生预填充。现在，如果你想更进一步，你可以这样做：

在页面加载的OnLoad事件期间，使用JavaScript检查手机字段，如果值等于一个空格（“”），则在触发onLoad时使用JavaScript用空字符串覆盖它。或者，如果浏览器仍在预填充（我怀疑它会但是如果它是），你可以延迟这个检查几百毫秒并在页面加载后几百毫秒运行javascript，或者将它绑定到全部或部分输入字段onFocus事件，所以只要任何字段获得焦点，你就会执行“phone.value等于一个空格字符（”“），如果确实如此，用空字符串覆盖它，我甚至更多某些浏览器在这种情况下不会跳进并劫持该字段。虽然如上所述，即使你在onLoad上执行此操作，我也怀疑浏览器会劫持你的字段，因为在浏览器内部发生页面/ javascript onload后onLoad（DocumentComplete）事件发生，最坏的情况下，你可以做几百毫秒的滞后或onFocus方法，但我怀疑你会不会需要这些。

让我知道它是怎么回事。

Answer 4

我尝试禁用输入字段type = text＆amp;在加载DOM之后键入=密码然后在某些毫秒之后启用所有禁用的字段让我们说100。它似乎对我有效。 试试：

$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');

$("body").delay(10,function(){
    $("input[type=text],input[type=password]").prop('disabled','');
    });
});