Html 通过 CSS 禁用自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2186290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable autocomplete via CSS
提问by David
Is it possible to use CSS to disable autocomplete on a form element (specifically a textfield)?
是否可以使用 CSS 禁用表单元素（特别是文本字段）上的自动完成功能？
I use a tag library which does not permit the autocomplete element and I would like to disable autocomplete without using Javascript.
我使用了一个不允许自动完成元素的标签库，我想在不使用 Javascript 的情况下禁用自动完成功能。
采纳答案by Christopher Klewes
You can use a generated idand nameeverytime, which is different, so the browser cannot remember this text-field and will fail to suggest some values.
您可以使用生成的id和name每次，这是不同的，因此浏览器无法记住此文本字段并且无法建议某些值。
This is at least the cross browser safe alternative, but I would recommend to go with the answer from RobertsonM (autocomplete="off").
这至少是跨浏览器安全的替代方案，但我建议使用 RobertsonM ( autocomplete="off")的答案。
回答by RobertsonM
As it stands, there is no 'autocomplete off' attribute in CSS. However, html has an easy code for this:
就目前而言，CSS 中没有“自动完成关闭”属性。但是，html 有一个简单的代码：
<input type="text" id="foo" value="bar" autocomplete="off" />
If you're looking for a site-wide effector, an easy one would be to simply have a js function to run through all 'input' s and add this tag, or look for the corresponding css class / id.
如果您正在寻找一个站点范围的效应器，一个简单的方法就是简单地使用一个 js 函数来运行所有 'input' 并添加此标签，或者查找相应的 css 类/id。
The autocomplete attribute works fine in Chrome and Firefox (!), but see also Is there a W3C valid way to disable autocomplete in a HTML form?
autocomplete 属性在 Chrome 和 Firefox (!) 中工作正常，但另请参阅是否有 W3C 有效方法来禁用 HTML 表单中的自动完成？
回答by ahhmarr
you can easily implement by jQuery
您可以通过 jQuery 轻松实现
$('input').attr('autocomplete','off');
回答by Ernest
If you're using a formyou can disable all the autocompletes with,
如果您使用的是 aform您可以禁用所有自动完成功能，
<form id="Form1" runat="server" autocomplete="off">
回答by Sampson
CSS does not have this ability. You would need to use client-side scripting.
CSS没有这种能力。您将需要使用客户端脚本。
回答by QMaster
I tried all suggested ways from this question answers and other articles in the web but not working anyway. I tried autocomplete="new-random-value", autocomplete="off" in form element, using client-side script as below but outside of $(document).ready() as one of the user mentioned:
我尝试了这个问题答案和网络上的其他文章中的所有建议方法，但无论如何都不起作用。我在表单元素中尝试了 autocomplete="new-random-value", autocomplete="off" ，使用客户端脚本如下但在 $(document).ready() 之外作为提到的用户之一：
$(':input').on('focus', function () {
$(this).attr('autocomplete', 'off')
});
I found maybe another priority in the browser cause this weird behavior! So I searched more and finally, I read again carefully below lines from this good article:
我发现浏览器中的另一个优先级可能会导致这种奇怪的行为！所以我搜索了更多，最后，我再次仔细阅读了这篇好文章中的以下几行：
For this reason, many modern browsers do not support autocomplete="off" for login fields:
If a site sets autocomplete="off" for a , and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. If a site sets autocomplete="off" for username and password fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent auto-filling of password fields, you can use autocomplete="new-password"; however, support for this value has not been implemented on Firefox.
出于这个原因，许多现代浏览器不支持登录字段的 autocomplete="off"：
如果站点为 a 设置了 autocomplete="off" ，并且表单包含用户名和密码输入字段，则浏览器仍会记住此登录名，如果用户同意，浏览器将在用户下次访问时自动填充这些字段访问页面。如果站点为用户名和密码字段设置了 autocomplete="off"，那么浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在用户下次访问该页面时自动填充这些字段。这是 Firefox（自版本 38）、Google Chrome（自 34）和 Internet Explorer（自版本 11）中的行为。
如果你正在定义一个用户管理页面，用户可以在其中为另一个人指定一个新密码，因此你想防止自动填充密码字段，你可以使用 autocomplete="new-password"；但是，Firefox 尚未实现对这个值的支持。
It's just worked. I tried in chrome specially and I hope this continues working and help others.
它刚刚奏效。我特别尝试了 chrome，我希望这能继续工作并帮助其他人。
回答by Webdma
I solved the problem by adding an fake autocomplete name for all inputs.
我通过为所有输入添加一个假的自动完成名称解决了这个问题。
$("input").attr("autocomplete", "fake-name-disable-autofill");
回答by Andrew
You can't use CSS to disable autocomplete, but you can use HTML:
您不能使用 CSS 来禁用自动完成功能，但您可以使用 HTML：
<input type="text" autocomplete="false" />
Technically you can replace falsewith any invalid value and it'll work. This iOS the only solution I've found which also works in Edge.
从技术上讲，您可以替换false为任何无效值，它会起作用。这个 iOS 是我发现的唯一解决方案，它也适用于 Edge。
回答by TrampGuy
Thanks to @ahhmarr'ssolution I was able to solve the same problem in my Angular+ui-routerenvironment, which I'll share here for whoever's interested.
感谢@ahhmarr 的解决方案，我能够在我的Angular+ui-router环境中解决同样的问题，我将在这里分享给感兴趣的人。
In my index.htmlI've added the following script:
在我的index.html我添加了以下脚本：
<script type="text/javascript">
setTimeout(function() {
$('input').attr('autocomplete', 'off');
}, 2000);
</script>
Then to cover state changes, I've added the following in my root controller:
然后为了覆盖状态更改，我在我的根控制器中添加了以下内容：
$rootScope.$on('$stateChangeStart', function() {
$timeout(function () {
$('input').attr('autocomplete', 'off');
}, 2000);
});
The timeouts are for the html to render before applying the jquery.
超时用于在应用 jquery 之前呈现 html。
If you find a better solution please let me know.
如果您找到更好的解决方案，请告诉我。
回答by rohit
$('input').attr('autocomplete','off');
