在HTML表单中，有一种有效的方法可以禁用自动完成吗？

Question

在HTML表单中，有一种有效的方法可以禁用自动完成吗？

431

使用 xhtml1-transitional.dtd 文档类型时，使用以下 HTML 收集信用卡号码：

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

在 W3C 验证器上会产生警告：

不存在 "autocomplete" 属性。

是否有符合标准的方法可以禁用表单中敏感字段的浏览器自动完成？

- matt b

10

你确定要更改用户的自动完成设置吗？如果他们已经开启了它，那么他们可能喜欢这个功能。自动完成是完全基于浏览器端的功能，就像允许用户更改字体大小的按钮一样。你不应该干涉他们的意愿。 - rmeador

113

即使对于像信用卡号这样敏感的信息，我也想不出有多少人会希望它被记住 - 特别是因为大多数浏览器默认启用了自动填充功能。如果他们非常想记住它，可以使用像Google工具栏这样的表单填写助手。 - matt b

13

我的使用情况略有不同 - 我正在开发自己的自动完成功能，我不希望它与浏览器的自动完成功能发生冲突。我刚刚发现autocomplete =“off”是无效的，但似乎没有其他简单的解决方案（用js注入只是愚蠢的做法）。 - thepeer

13

@rmeador 因为有时我们想要提供一个更加用户友好的替代标准的自动建议框。 @corydoras 请不要霸道地使用你的OSX，这对解决问题没有帮助。 - Josh M.

12

问题在于，如果发生欺诈交易，银行将追究商家的责任……即使这完全是顾客的错。因此，在某些情况下，禁用该功能对于顾客来说是合理的。 - Anon21

显示剩余9条评论

18个回答

65

如果W3C提出的方法可以在（X）HTML4中使用，那我会非常惊讶。自动完成功能完全基于浏览器，在最近几年被引入（远晚于HTML4标准的编写时间）。

不过，如果是HTML5，我一点也不会感到惊讶。

编辑: 如我所料，HTML5确实拥有该功能。要将您的页面定义为HTML5，请使用以下doctype（即将其放置在源代码的最前面）。请注意，并非所有浏览器都支持此标准，因为它仍处于草案形式。

<!DOCTYPE html>

- Henrik Paul

7

所有浏览器都支持较早版本的Konqueror，甚至包括IE6。这是要使用的文档类型。 - BalusC

58

HTML 4: 不支持

HTML 5: 支持

自动填充属性是一种枚举属性。该属性有两个状态，“on”关键字映射到“on”状态，“off”关键字映射到“off”状态。该属性也可以省略，默认缺失值为“on”状态。“off”状态表示默认情况下，表单控件中的自动填充字段名称设置为“off”；“on”状态表示默认情况下，表单控件中的自动填充字段名称设置为“on”。

参考资料：W3

- Zaagmans

@freestock.tk 是比其他所有网站都更清晰的。简单易懂很重要。 - OverCoder

32

不是，但浏览器的自动填充通常由与之前填写过的字段具有相同的name属性的字段触发。如果你能想出一种聪明的方法来设置一个随机名称，自动填充就无法提取任何先前输入过的值。

例如，如果您将输入字段命名为"email_<?= randomNumber() ?>"，然后让接收此数据的脚本循环遍历POST或GET变量，查找与模式"email_[某个数字]"匹配的内容，那么这样做就可行，并且（几乎）可以保证成功，而且不受任何浏览器的影响。

- Phantom Watson

6

这会使自动化测试变得更加困难。 - David Waters

14

如果你的测试软件不能处理可能附加随机数字的字段，请注意这会使自动化测试更加困难。也许是时候升级你的自动化测试软件了。 - corydoras

8

自动完成的信息是否仍将保存在浏览器的数据目录中？ - Joey Adams

2

大概吧。但不会预期再次出现在用户面前。 - Phantom Watson

1

Chrome现在针对特定网站使用type="password"属性而不是name属性。我有name="newpassword" autocomplete='off' type="password"，但它会自动填充！如果我更改类型，就不会自动填充。 - Enigma Plus

显示剩余2条评论

31

不，一个好的文章在这里：Mozila Wiki。

我会继续使用无效的属性。我认为实用主义应该胜过验证。

- David Waters

23

用JavaScript来设置它怎么样？

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

虽然不是完美的，但您的HTML将是有效的。

- RoBorg

8

使用 JavaScript 来解决验证错误就像把灰尘扫到地毯底下一样。虽然 HTML 文档可能会变得有效，但生成的 HTML+JS 页面却不会是有效的。 - fregante

19

我建议捕获所有4种类型的输入：

$('form,input,select,textarea').attr("autocomplete", "off");

参考资料：

- Malartre

3

可以使用:input。 - Ascherer

11

如果你使用jQuery，你可以这样做：

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

并在需要的地方使用autocompleteOff类：

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

如果您想让所有输入都具有autocomplete=off属性，您只需使用以下代码：

$(document).ready(function(){$("input").attr("autocomplete","off");});

- Totoche

4

只使用HTML5 doctype更简单、更好。 - BalusC

5

这并不是真正有效的HTML，它只是以一种不同于在HTML中设置（无效的）autocomplete属性的方式进行设置。 - matt b

这段代码对我来说不起作用；我使用了 $('input.autocompleteOff').val('');，看起来没问题。 - dqd

5

使用 JavaScript 作为规避验证错误的方法就像把灰尘扫到地毯底下一样。虽然 HTML 文档可能会变得有效，但生成的 HTML+JS 页面却不会是有效的。 - fregante

8

autocomplete = "off"，这将解决所有现代浏览器的问题。

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

在当前版本的Gecko浏览器中，自动填充属性可以完美地运行。在早期版本中，从Netscape 6.2开始，自动填充属性只在“地址”和“名称”表单中无法正常工作。

更新

在某些情况下，即使将自动填充属性设置为关闭，浏览器仍会继续建议自动填充值。这种意外的行为可能会让开发人员感到困惑。真正强制禁用自动填充的技巧是将一个随机字符串分配给此属性，例如：

autocomplete="nope"

由于这个随机值不是一个有效的值，浏览器会放弃。

文档链接

- Emilio Gort

现代浏览器不会出于选择而忽略autocomplete=off。:/ 不幸的是。 - Alexus

@Alexus 添加了一些更新...互联网变化非常快。 - Emilio Gort

8

另一种方法 - 这也有助于提高安全性 - 是每次显示输入框时都将其命名为不同的名称，就像验证码一样。这样，会话可以读取仅限一次的输入，而自动完成无从得知。

关于rmeador的问题，是否应该干涉浏览器体验，我想指出一个观点：我们开发联系人管理和CRM系统时，当您在表单中输入其他人的数据时，您不希望它不断地建议您自己的详细信息。

这对我们的需求很有效，但我们有幸告诉用户使用一个好的浏览器 :)

autocomplete='off'

- Enigma Plus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Presta · Accepted Answer

这里是来自MDC的一篇很好的文章，介绍了表单自动完成的问题和解决方案。 Microsoft 也发表了类似的内容。

说实话，如果这对你的用户很重要，以这种方式“打破”标准似乎是合适的。例如，亚马逊使用“autocomplete”属性很多次，看起来效果不错。

如果您想完全删除警告，可以使用JavaScript将该属性应用于支持它的浏览器（IE和Firefox是重要的浏览器）someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

最后，如果您的站点正在使用HTTPS，则IE会自动关闭自动完成（据我所知，其他一些浏览器也是如此）。

更新

由于这个答案仍然得到了很多赞，我想指出在HTML5中，您可以在表单元素上使用“autocomplete”属性。请参见W3C上的文档。