通过 CSS 禁用自动完成

是否可以使用 CSS 来禁用表单元素(特别是 textfield)的自动完成功能？

我使用了一个标记库，它不允许自动完成元素，我想禁用自动完成而不使用 Javascript。

156723 次浏览
小开

CSS 没有这种能力。您需要使用客户端脚本。

小开
最佳答案

您可以每次都使用生成的 id和 name，这是不同的，因此浏览器无法记住这个文本字段，并且将无法建议某些值。

这至少是跨浏览器安全的选择，但我建议使用 RobertsonM (autocomplete="off")的答案。

小开

实际上，CSS 中没有“ autocomplete off”属性。然而，html 有一个简单的代码:

<input type="text" id="foo" value="bar" autocomplete="off" />

如果您正在寻找站点范围的效果器，一个简单的方法是使用 js 函数来遍历所有的“ input”并添加这个标记，或者寻找相应的 css class/id。

Autocomplete 属性在 Chrome 和 Firefox (!)中工作得很好，但是也可以参见 是否有 W3C 有效的方法来禁用 HTML 表单中的自动完成功能？

小开

可以通过 jQuery 轻松实现

$('input').attr('autocomplete','off');
小开

If you're using a form you can disable all the autocompletes with,

<form id="Form1" runat="server" autocomplete="off">
小开

多亏了 @ ahhmarr’s解决方案，我才能够在我的 角形 + ui 路由器环境中解决同样的问题，我将在这里分享给感兴趣的人。

在我的 index.html中，我添加了以下脚本:

<script type="text/javascript">
setTimeout(function() {
$('input').attr('autocomplete', 'off');
}, 2000);
</script>

然后，为了覆盖状态更改，我在根控制器中添加了以下内容:

$rootScope.$on('$stateChangeStart', function() {
$timeout(function () {
$('input').attr('autocomplete', 'off');
}, 2000);
});

超时是在应用 jquery 之前 HTML 要呈现的内容。

如果你找到更好的解决办法，请告诉我。

小开

我尝试了所有建议的方式从这个问题的答案和其他文章在网上，但不管怎样工作。我在表单元素中尝试了 autocomplete = “ new-Random-value”，autocomplete = “ off”，使用客户端脚本，如下所示，但在 $(document)之外。Ready ()作为提到的用户之一:

$(':input').on('focus', function () {
$(this).attr('autocomplete', 'off')
});

我在浏览器里找到了另一个优先级导致了这个奇怪的行为！因此，我搜索了更多，最后，我再次仔细阅读了 this good article的下面几行:

出于这个原因，许多现代浏览器不支持 Autocomplete = “ off”用于登录字段:

如果站点为 a 设置 autocomplete = “ off”，并且表单包括 用户名和密码输入字段，然后浏览器仍然会提供 要记住这个登录，如果用户同意，浏览器将 当用户下次访问页面时，自动填充这些字段 Site 为用户名和密码字段设置 autocomplete = “ off”, 那么浏览器仍然会提供记住这个登录名，如果 user agrees, the browser will autofill those fields the next time the 用户访问页面。这是 Firefox (从版本开始)中的行为 谷歌浏览器(自34年以来)和 Internet Explorer (自34年以来的版本) 11).

如果定义用户管理页，用户可以在其中指定 为另一个人设置新密码，因此要防止 自动填写密码字段，可以使用 autocomplete="new-password"; however, support for this value has not been implemented on Firefox.

它刚刚工作。我尝试在铬特别，我希望这继续工作，并帮助其他人。

小开

我通过为所有输入添加一个假的自动完成名称来解决这个问题。

$("input").attr("autocomplete", "fake-name-disable-autofill");
小开

你不能使用 CSS 来禁用自动补全，但是你可以使用 HTML:

<input type="text" autocomplete="false" />

Technically you can replace false with any invalid value and it'll work. This iOS the only solution I've found which also works in Edge.

小开

有三种方法，我提到它们是为了成为更好的方法..。

1-HTML way:

<input type="text" autocomplete="off" />

2-Javascript 方式:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery 方式:

$('input').attr('autocomplete','off');
小开

我只是使用 'new-password'而不是 'off'的自动完成。

and I also have try using this code and works (at least on my end), I use WP and GravityForm for your information

$('input').attr('autocomplete','new-password');

提交答案