通过 CSS 禁用自动完成

Posted 2023-03-05

【中文标题】通过 CSS 禁用自动完成

【英文标题】：Disable autocomplete via CSS

【发布时间】：2011-01-12 06:41:27

【问题描述】：

是否可以使用 CSS 来禁用表单元素（特别是文本字段）的自动完成功能？

我使用了一个不允许自动完成元素的标签库，我想在不使用 javascript 的情况下禁用自动完成。

【参考方案1】：

就目前而言，CSS 中没有“自动完成关闭”属性。但是，html 有一个简单的代码：

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

如果你正在寻找一个站点范围的效应器，一个简单的方法是简单地有一个 js 函数来运行所有 'input' 并添加这个标签，或者寻找相应的 css 类/id。

自动完成属性在 Chrome 和 Firefox (!) 中运行良好，但另请参阅 Is there a W3C valid way to disable autocomplete in a HTML form?

【讨论】：

developer.mozilla.org/en-US/docs/Web/Security/… 建议 autocomplete="anyrandominvalidvalue" 可以工作。

【参考方案2】：

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

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

【讨论】：

这样做的副作用是，浏览器历史记录会被许多不同的（随机）表单字段弄得乱七八糟。每次在浏览器本地数据库中查找已知值都需要一些时间。

好主意，但它不会阻止信用卡号码被保存到未加密的自动完成数据库中。

如果您不使用静态控件名称/ID，那么任何脚本都会被破坏，任何表单数据收集也会被破坏（除非您的应用程序的每个方面都知道新的命名约定并且是动态的更新任何脚本/数据收集）。

我必须避免自动完成，“随机化”字段名称是唯一真正可行的方法。使用像 autocomplete="off" 这样的任何提示将在 Browser X 版本（当前 + 1）中被忽略。 （例如，最新的 Google Chrome 会忽略 autocomplete=off。）

@kmoser：即使您通过随机化元素id 来破坏浏览器的自动完成功能，它仍然会将其保存在缓存中（即在用户的硬盘上）。这对某人来说是一件可怕的事情。卡号或任何其他敏感信息。此外，它不必要地使用户的磁盘驱动器混乱。每次他们访问您的页面时，都会在他们的计算机上保存一个新的（类似 cookie 的）文件。只是为了它，尝试清除您的 Chrome 缓存并查看它将释放多少空间（如果您有一段时间没有这样做）。这就是为什么我称之为糟糕的想法。

【参考方案3】：

你可以通过jQuery轻松实现

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

【讨论】：

在大多数情况下，$('form').attr('autocomplete','off');效率更高（请参阅下面对答案的评论）

@irakli 在我的情况下，使用form 是唯一有效的方法。不是input。谢谢。

嗨，2018 年，这几乎是我这些天可以让它工作的唯一方法。此外，@irakli 如果您需要在整个表单上使用我们的表单作为选择器，这是正确的。

一个javascript版本？还是这个的vue版本？

【参考方案4】：

如果您使用的是 form，您可以禁用所有自动完成功能，

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

【讨论】：

indeed, per Mozilla:"如果输入元素上没有指定自动完成属性，则浏览器使用 元素的表单所有者的自动完成属性值。表单所有者是表单此 元素的后代元素或其 id 由 input 元素的 form 属性指定的 form 元素。有关详细信息，请参阅

【参考方案5】：

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

【讨论】：

知道如何在边缘禁用它吗？无论我们做什么，我们都会看到它。

@BenjaminGruenbaum 使用 autocomplete="false" 将在 Edge 中工作。从技术上讲，任何无效值都可以在这里代替“false”。

【参考方案6】：

我从这个问题的答案和网络上的其他文章中尝试了所有建议的方法，但无论如何都没有工作。我在表单元素中尝试了 autocomplete="new-random-value", autocomplete="off"，使用如下客户端脚本，但在 $(document).ready() 之外，作为用户之一提到：

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

我发现浏览器中的另一个优先级可能会导致这种奇怪的行为！所以我搜索了更多，最后，我再次仔细阅读了this good article的以下行：

因此，许多现代浏览器不支持 登录字段的 autocomplete="off"：

如果网站为 a 设置了 autocomplete="off" ，并且表单包括 用户名和密码输入字段，那么浏览器仍然会提供 记住这个登录，如果用户同意，浏览器会 下次用户访问该页面时自动填充这些字段。如果一个 站点为用户名和密码字段设置 autocomplete="off"， 那么浏览器仍然会提供记住这个登录信息，如果 用户同意，下次浏览器会自动填充这些字段 用户访问该页面。这是 Firefox 中的行为（自版本 38)、谷歌浏览器 (34 起) 和 Internet Explorer (自版本 11).

如果您要定义用户管理页面，用户可以在其中指定 另一个人的新密码，因此您要防止 自动填写密码字段，您可以使用 autocomplete="new-password";但是，Firefox 尚未实现对这个值的支持。

它刚刚工作。我专门在 chrome 中尝试过，我希望这能继续工作并帮助其他人。

【讨论】：

谁能帮忙把它转换成 vanilla js？

@kirtan403 你的意思是js代码吗？如果我记得，它是行不通的。

是的js代码。我已经转换，但不为我工作。不知道为什么

我想做动态的，因为在我使用 vuejs 时总会添加新元素。

我明白了，但是我提到js代码不能正常工作。

【参考方案7】：

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

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

【参考方案8】：

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

1-HTML方式：

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

2-Javascript方式：

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

3-jQuery方式：

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

【参考方案9】：

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

我也尝试过使用此代码并且可以工作（至少在我这方面），我使用 WP 和 GravityForm 为您提供信息

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

【参考方案10】：

感谢@ahhmarr's 解决方案，我能够在我的 Angular+ui-router 环境中解决同样的问题，我会在这里分享给有兴趣的人。

在我的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。

如果您找到更好的解决方案，请告诉我。

【参考方案11】：

您不能使用 CSS 来禁用自动完成功能，但可以使用 HTML：

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

从技术上讲，您可以将false 替换为任何无效值，它会起作用。这个 ios 是我发现的唯一一个也适用于 Edge 的解决方案。