当使用xhtml1-transitional。使用以下HTML收集一个信用卡号

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

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

没有“自动完成”属性。

是否有一种符合标准的方法来禁用浏览器自动完成表单中的敏感字段?


如果W3C提出了一种与(X)HTML4一起工作的方法,我会感到非常惊讶。自动补全功能完全是基于浏览器的,是在过去几年中引入的(远远落后于HTML4标准的编写)。

不过,如果HTML5有这样的功能也不足为奇。

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

<!DOCTYPE html>

不,但是浏览器自动完成通常是由字段具有与之前填写的字段相同的name属性触发的。如果您可以使用一种聪明的方法来拥有一个随机的字段名称,那么自动补全将无法提取该字段之前输入的任何值。

如果你给一个输入字段一个像“email_<?”= randomNumber() ?>”,然后让接收此数据的脚本通过POST或GET变量循环查找与模式“email_[some number]”匹配的内容,您可以完成此操作,并且这将(实际上)保证成功,无论使用哪种浏览器。


不,在Mozila Wiki上有一篇好文章。

我将继续使用无效属性。我认为这就是实用主义应该战胜认可的地方。


不理想,但你可以改变id和文本框的名称,每次你渲染它-你必须跟踪它的服务器端,这样你就可以得到数据。

不确定这是否会起作用,这只是一个想法。


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

老实说,如果这对你的用户很重要,用这种方式“打破”标准似乎是合适的。例如,亚马逊使用“自动完成”属性相当多,它似乎工作得很好。

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

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

更新

由于这个答案仍然得到了相当多的赞,我只是想指出,在HTML5中,你可以在你的表单元素上使用“autocomplete”属性。请参阅W3C上的文档。


HTML 4:否

HTML 5:是

自动完成属性是一个枚举属性。属性 有两种状态。关键字on对应on状态,off对应off状态 关键字映射到关闭状态。属性也可以省略。的 缺少值default是开启状态。关闭状态表示通过 默认情况下,表单中的表单控件将有它们的自动填充字段名 出发的:出发的;on状态表示默认情况下,表单控件在 表单将自动填充字段名称设置为“on”。

参考:W3


用JavaScript设置怎么样?

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

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


有效的自动补全

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>

如果你使用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");});

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

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

参考:

http://www.w3.org/Submission/web-forms2/#the-autocomplete http://dev.w3.org/html5/markup/input.html


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

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


使用随机的“name”属性对我来说很有用。

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


另一种方法——这也有助于安全性——是每次显示输入框时调用不同的东西:就像captha一样。这样,会话就可以读取一次性的输入,而自动完成就没有什么可做的了。

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

这可以满足我们的需求,但是我们可以奢侈地告诉用户使用一个不错的浏览器:)

autocomplete='off' 

Note that there's some confusion about location of the autocomplete attribute. It can be applied either to the whole FORM tag or to individual INPUT tags, and this wasn't really standardized before HTML5 (that explicitly allows both locations). Older docs most notably this Mozilla article only mentions FORM tag. At the same time some security scanners will only look for autocomplete in INPUT tag and complain if it's missing (even if it is in the parent FORM). A more detailed analysis of this mess is posted here: Confusion over AUTOCOMPLETE=OFF attributes in HTML forms.


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");
        }
    }
}

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

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

在当前版本的Gecko浏览器中,自动完成属性工作得很好。对于早期版本,即Netscape 6.2,它只适用于带有“地址”和“名称”的表单。

更新

在某些情况下,即使autocomplete属性被设置为关闭,浏览器也会继续建议自动补全值。这种出乎意料的行为可能会让开发人员感到困惑。真正强制no-autocompletion的技巧是为属性分配一个随机字符串,例如:

autocomplete="nope"

由于这个随机值不是有效值,浏览器将放弃。

Documetation


这个解决方案对我很管用:

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

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

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">

我在2020年就做到了!

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

这里有一个最近讨论的链接: https://stackoverflow.com/a/64471795/8754782