430

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

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

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

没有属性“自动完成”。

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

4

18 回答 18

426

是 MDC 的一篇好文章,它解释了形成自动完成的问题(和解决方案)。微软也在这里发布了类似的东西。

老实说,如果这对您的用户来说很重要,那么以这种方式“打破”标准似乎是合适的。例如,亚马逊使用了很多“自动完成”属性,它似乎运作良好。

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

最后,如果您的网站使用 HTTPS,IE 会自动关闭自动完成功能(据我所知,其他一些浏览器也是如此)。

更新

由于这个答案仍然得到不少赞成,我只想指出,在 HTML5 中,您可以在表单元素上使用“自动完成”属性。请参阅 W3C 上的文档

于 2009-02-24T15:52:49.233 回答
64

如果 W3C 会提出一种适用于 (X)HTML4 的方法,我会感到非常惊讶。自动完成功能完全基于浏览器,并且是在过去几年中引入的(远在编写 HTML4 标准之后)。

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

编辑:正如我所想,HTML5确实具有该功能。要将您的页面定义为 HTML5,请使用以下文档类型(即:将其作为源代码中的第一个文本)。请注意,并非所有浏览器都支持此标准,因为它仍处于草稿形式。

<!DOCTYPE html>
于 2009-02-24T15:47:24.163 回答
58

HTML 4:否

HTML 5:是的

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

参考:W3

于 2009-02-24T15:55:51.707 回答
32

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

如果您要为输入字段命名为“ email_<?= randomNumber() ?>”,然后让接收此数据的脚本通过 POST 或 GET 变量循环查找与模式“ email_[some number]”匹配的内容,您可以将其取消,这将具有 (实际上)保证成功,无论浏览器如何

于 2009-02-24T15:48:41.960 回答
31

不,Mozila Wiki中有一篇好文章。

我会继续使用无效的attribute. 我认为这是实用主义应该战胜验证的地方。

于 2009-02-24T15:48:45.047 回答
23

用 JavaScript 设置它怎么样?

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

它并不完美,但您的 HTML 将是有效的。

于 2009-02-24T15:57:49.533 回答
19

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

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

参考:

于 2010-09-07T21:30:55.957 回答
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");});
于 2010-08-10T16:44:08.433 回答
8

另一种方法 - 也有助于提高安全性,是每次显示输入框时都给输入框起不同的名称:就像 captha 一样。这样,会话可以读取一次性输入,并且自动完成没有什么可继续的。

关于 rmeador 关于您是否应该干扰浏览器体验的问题的一点:我们开发联系人管理和 CRM 系统,当您将其他人的数据输入到表单中时,您不希望它不断地提示您自己的详细信息。

这可以满足我们的需求,但是我们可以告诉用户获得一个像样的浏览器:)

autocomplete='off' 
于 2012-05-15T08:21:29.857 回答
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"

由于这个随机值不是 a valid one,浏览器会放弃。

文档

于 2014-07-11T21:16:28.660 回答
6

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

我在发送表单时重置了名称属性,因此在发送表单时您仍然可以通过名称访问它。(使用 id 属性存储名称)

于 2012-01-22T21:05:22.163 回答
5

请注意,关于自动完成属性的位置存在一些混淆。它可以应用于整个 FORM 标记或单个 INPUT 标记,这在 HTML5 之前并没有真正标准化(明确允许两个 位置)。较早的文档最值得注意的是这篇Mozilla 文章只提到了 FORM 标签。同时,一些安全扫描器只会在 INPUT 标签中寻找自动完成功能,并在它丢失时抱怨(即使它父 FORM 中)。此处发布了对这种混乱的更详细分析:混淆 HTML 表单中的 AUTOCOMPLETE=OFF 属性

于 2013-02-07T11:22:54.003 回答
3

不理想,但您可以在每次渲染时更改文本框的 id 和名称 - 您还必须在服务器端跟踪它,以便将数据取出。

不确定这是否可行,只是一个想法。

于 2009-02-24T15:49:54.077 回答
2

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

我可能错了,但这只是一个想法。

于 2011-08-01T00:43:39.087 回答
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");
        }
    }
}
于 2013-12-31T21:31:09.360 回答
0

我在 2020 年完成了这项工作!

我基本上创建了一个 css 类,将 -webkit-text-security 应用于我的输入。

这是最近讨论的链接: https ://stackoverflow.com/a/64471795/8754782

于 2020-10-21T21:14:59.390 回答
-1

此解决方案适用于我:

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

如果你想在这个区域使用自动填充:添加autocomplete="false"元素 ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
于 2018-10-18T03:08:04.517 回答
-5

有效的自动完成关闭

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
于 2010-04-09T15:31:48.090 回答