代码之家 › 专栏 › 技术社区 › matt b

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

w3c html-form standards html

417

matt b · 技术社区 · 16 年前

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

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

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

没有“自动补全”属性。

是否有符合标准的方法来禁用表单中敏感字段的浏览器自动补全功能?

17 回复 | 直到 7 年前

426

Community CDub 10 年前

Here 是MDC的一篇好文章,它解释了表单自动补全的问题(和解决方案)。微软也发布了类似的东西 here ,也是。

说实话,如果这对你的用户来说很重要,那么以这种方式“打破”标准似乎是合适的。例如,亚马逊经常使用“自动补全”属性,而且似乎效果很好。

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

更新

由于这个答案仍然获得了相当多的赞成票,我只是想指出,在HTML5中,你可以在表单元素上使用“自动补全”属性。请参阅 documentation 关于W3C。

Marcelo Cantos 12 年前

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

HTML5 does have that 功能。要将您的页面定义为HTML5,请使用以下doctype(即:将其作为源代码中的第一个文本)。请注意,并非所有浏览器都支持此标准,因为它仍处于草案形式。

<!DOCTYPE html>

driconmax 8 年前

HTML 5

自动补全属性是一个枚举属性。属性关关键字映射到关闭状态。该属性也可以省略。这缺失值默认值为 在…上 关国家表示,通过默认情况下,表单中的表单控件将具有其自动填充字段名称着手关 ;打开状态表示默认情况下,中的窗体控件 autofill

参考: W3

Phantom Watson 16 年前

name ,自动补全将无法为该字段提取任何以前输入的值。

如果你给一个输入字段起一个名字,比如“ email_<?= randomNumber() ?> “,然后让脚本通过POST或GET变量接收此数据循环,寻找与模式匹配的内容” email_[some number] “,你可以做到这一点,这将(实际上)保证成功, 无论浏览器如何 .

atiquratik jaywon 10 年前

Mozila Wiki .

attribute 我认为这就是实用主义应该战胜验证的地方。

Peter Mortensen icecrime 14 年前

用JavaScript设置它怎么样?

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

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

Raptor 11 年前

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

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

参考:

Raptor 11 年前

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

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

如果你希望所有的输入都是 autocomplete=off

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

Enigma Plus 13 年前

autocomplete='off'

Emilio Gort Gordon Linoff 7 年前

autocomplete="off"

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

更新

为属性分配一个随机字符串

autocomplete="nope"

valid one

Documetation

opznhaarlems 13 年前

kravietz 12 年前

请注意,关于自动补全属性的位置存在一些混淆。它既可以应用于整个FORM标签,也可以应用于单个INPUT标签,在HTML5之前,这并没有真正标准化(HTML5明确允许 both locations ).较旧的文档最值得注意的是 Mozilla article 仅提及FORM标签。同时,一些安全扫描程序只会在INPUT标签中查找自动补全,并在丢失时进行投诉(即使它是 Confusion over AUTOCOMPLETE=OFF attributes in HTML forms .

Kieron 16 年前

这并不理想,但你可以在每次渲染文本框时更改它的id和名称——你也必须在服务器端跟踪它,这样你才能获取数据。

AI Generated Response 14 年前

Tomer Cohen 6 年前

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

Thales Kenne 4 年前

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

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

https://stackoverflow.com/a/64471795/8754782

-1

Laura 6 年前

这个解决方案对我很有效:

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

如果要在此区域中使用自动填充:添加 autocomplete="false" 自在前任:

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

-5

Southampton Web Design 15 年前

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