有W3C有效的方法来禁用HTML表单中的自动完成功能吗？

424

使用xhtml1-transitional.dtddoctype时，请使用以下HTML收集信用卡号

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

将在W3C验证器上标记警告：

没有属性“自动完成”。

是否存在W3C /标准方法来禁用表单中敏感字段上的浏览器自动完成功能？

html  standards  forms  w3c 
— 马特b
source
10
您确定要弄乱用户的自动完成设置吗？如果将其打开，他们可能会喜欢。自动完成功能是一种完全在浏览器端的功能，就像允许用户更改字体大小的按钮等。您不应该干扰他们的意愿
— rmeador
113
即使对于像信用卡号这样敏感的东西？我想不出想记住这些的人-尤其是因为大多数浏览器默认情况下都自动启用自动完成功能。如果他们希望它记得很糟糕，可以使用填写Google工具栏之类的表格。
— 马特b
13
我的用例略有不同-我正在滚动自己的自动完成功能，但我不希望它与浏览器冲突。我只是发现autocomplete =“ off”是无效的，但是似乎没有其他简单的解决方案（用js注入只是愚蠢的）
— 同行2010年
13
@rmeador，因为有时我们想提供一种比标准自动建议框更用户友好的替代方法。@corydoras，请不要增加OSX的权重，它对解决这个问题没有帮助。
— 乔什·M
12
问题是，即使发生欺诈性交易，银行也将追究商人的责任……即使客户的过失是100％。因此，在某些情况下，为客户禁用该功能是合法的。
— Alexandre H. Tremblay

Answers:

421

这是MDC上的一篇好文章，它解释了形成自动补全的问题（和解决方案）。微软也在这里发布了类似的内容。

老实说，如果这对您的用户来说很重要，则以这种方式“打破”标准似乎是适当的。例如，亚马逊相当多地使用了“自动完成”属性，并且看起来运行良好。

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

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

更新资料

由于此答案仍有很多反对意见，我只想指出，在HTML5中，您可以在表单元素上使用'autocomplete'属性。请参阅W3C上的文档。

— 尼克·普雷斯塔
source
41
看起来Firefox不会关闭https上的自动完成功能，但这是有用的知识。谢谢！
— 马特b
3
Safari不尊重autocomplete =“ off”属性。见stackoverflow.com/questions/22817801/...
— Skurpi
1
autocomplete可用于不仅在form元件，并off至少在值作品chromium-40.0.2214.115
— X-由里
W3C的似乎（因为此评论的草案）将扩大自动完成的标准HTML5.1 w3c.github.io/html/...
— 贾斯汀Nafe
1
如果没有任何效果，请使用textarea而不是文本框来关闭自动完成功能。
— 森2015年
64

如果W3C提出一种可与（X）HTML4一起使用的方法，我将感到非常惊讶。自动完成功能完全基于浏览器，并且在最近几年（很早就编写了HTML4标准）中引入。

不过，如果HTML5有一个，也不会感到惊讶。

编辑：我认为，HTML5 确实具有该功能。要将页面定义为HTML5，请使用以下doctype（即：将其作为源代码中的第一个文本）。请注意，并非所有浏览器都支持此标准，因为它仍处于草稿形式。

<!DOCTYPE html>
— 亨里克·保罗
source
7
所有浏览器都希望Konqueror的旧版本支持它。甚至IE6也支持它。这是文档类型。
— BalusC
56

HTML 4：否

HTML 5：是

自动完成属性是枚举属性。该属性具有两个状态。在上关键字映射到导通状态，并且关闭 关键字映射到关断状态。该属性也可以省略。缺少的值默认为打开状态。该关闭状态表示在默认情况下，在形式表单控件都会有自己的自动填充字段名称设置为关闭 ; on状态表示默认情况下，表单中的表单控件会将其autofill字段名称设置为“ on”。

参考：W3

— 鲁德·科克
source
@ freestock.tk是的，它比其他所有符号都清晰。简单很重要。
— OverCoder
32

不，但是浏览器自动完成通常是由与name先前填写的字段具有相同属性的字段触发的。如果您可以采用一种巧妙的方法来获得随机的字段名称，则自动完成功能将无法提取该字段的任何先前输入的值。

如果要给输入字段一个名称，例如“ email_<?= randomNumber() ?>”，然后让脚本通过POST或GET变量接收此数据循环，以查找与模式“ email_[some number]” 匹配的内容，则可以将其删除，这样就可以了（实际上），无论浏览器如何，都保证成功。

— 幻影沃森
source
6
这将使自动测试更加困难。
— David Waters
14
仅当您的测试软件无法应对检查/读取可能附加了随机数的字段时，才会使自动测试更加困难。可能是时候升级您的自动化测试软件了。
— corydoras
8
自动完成信息仍将保存在浏览器的数据目录中，不是吗？
— 乔伊·亚当斯
2
想必。但是不会期望它再次出现在用户面前。
— 幻影沃森
1
Chrome现在使用type =“ password”属性而不是特定网站的name属性。我有name =“ newpassword” autocomplete ='off'type =“ password”，它会自动填充！如果我更改类型，则不会自动填充
— Enigma Plus
23

如何使用JavaScript进行设置？

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

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

— 格雷格
source
8
使用javascript作为验证错误的解决方法就像在地毯下扫灰尘。尽管HTML文档可能有效，但生成的HTML + JS页面将无效。
— fregante 2012年
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");});
— 托托奇
source
4
仅使用HTML5文档类型会更容易，更好。
— BalusC 2010年
5
无论如何这并不是真正有效的html，它只autocomplete是以不同于html的其他方式设置（无效）属性
— matt b 2010年
该代码对我不起作用；我已经习惯了$('input.autocompleteOff').val('');，这似乎还可以。
— 2011年
5
使用javascript作为验证错误的解决方法就像在地毯下扫灰尘。尽管HTML文档可能有效，但生成的HTML + JS页面将无效。
— fregante 2012年
8

另一种方式-这也将有助于提高安全性，每次显示时都将输入框命名为不同的名称：就像captha。这样，会话就只能读取一次性输入，而“自动完成”则无事可做。

关于rmeador的问题，即是否应该干扰浏览器体验，我们只需要说明一点：我们开发了Contact Management＆CRM系统，当您以表格形式输入其他人的数据时，您不希望它不断地提出您自己的详细信息。

这可以满足我们的需求，但是然后我们可以告诉用户获得一个不错的浏览器：）

autocomplete='off'
— 谜加
source
8

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

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

在当前版本的Gecko浏览器中，autocomplete属性可以完美工作。对于较早的版本，回到Netscape 6.2，它适用于带有“地址”和“名称”的表单的例外。

更新资料

在某些情况下，即使将autocomplete属性设置为off，浏览器也会继续建议自动补全值。对于开发人员而言，这种意外行为可能会令人困惑。真正强制不自动补全的技巧是为属性分配一个随机字符串，例如：

autocomplete="nope"

由于此随机值不是valid one，浏览器将放弃。

记录

— 埃米利奥·戈特（Emilio Gort）
source
现代浏览器不选择自动完成功能。：/不幸的是。
— Alexus '17
@Alexus添加了一些更新...互联网更改非常快
— Emilio Gort
6

使用随机的“名称”属性对我有用。

我在发送表单时重置了name属性，因此在发送表单时您仍然可以按名称访问它。（使用id属性存储名称）

— Opznhaarlems
source
5

请注意，关于自动完成属性的位置有些困惑。它既可以应用于整个FORM标记，也可以应用于单个INPUT标记，并且在HTML5之前并没有真正标准化（明确允许两个 位置）。最值得注意的是旧版文档，该Mozilla文章仅提及FORM标签。同时，一些安全扫描程序将只寻找在INPUT标记自动完成，如果缺少投诉（即使是在父窗体）。有关此混乱情况的详细分析，请参见此处：HTML表单中对AUTOCOMPLETE = OFF属性的困惑。

— 克拉维兹
source
3

这并不理想，但是您每次渲染文本框时都可以更改其ID和名称-您也必须在服务器端对其进行跟踪，以便获取数据。

不知道这是否行得通，只是一个想法。

— 基龙
source
2

我认为有一种更简单的方法。创建一个具有随机名称的隐藏输入（通过javascript），并将用户名设置为该名称。重复输入密码。这样，您的后端脚本就可以准确地知道相应的字段名称是什么，同时保持自动完成功能在黑暗中。

我可能错了，但这只是个主意。

— 蛇和咖啡
source
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
— 杰克·塔克
source
-1

此解决方案适用于我：

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

如果要在该区域中使用自动填充功能，请添加autocomplete="false"元素ex：

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
— HưngTrịnh
source
-5

有效的自动完成关闭

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
— 南安普敦网页设计
source
13
当然，如果用户关闭了JS，他们将无法完成订单，因为他们无法输入卡号？更好地通过JS补充属性-最糟糕的情况是，JS关闭使卡号字段具有自动完成的潜力，但至少他们可以下订单...只是一个想法:)
— Terry_Brown
3
这甚至都不好笑。
— 里卡多·皮珀
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.