javascript 以编程方式禁用 Chrome 自动填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50604671/
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
Programmatically disabling Chrome auto-fill
提问by HenrikV
There's some discussion about this around the internet (especially here on stack overflow), but quite a lot of it dates from around 2015, so I was wondering if anyone had any recent experience.
互联网上有一些关于这个的讨论（尤其是关于堆栈溢出的讨论），但很多都可以追溯到 2015 年左右，所以我想知道是否有人最近有任何经验。
We use a JavaScript widget to power type-ahead search functionality on web forms, but this UI is consistently overlaid with the Chrome autofill.
我们使用 JavaScript 小部件为 Web 表单上的预输入搜索功能提供支持，但此 UI 始终与 Chrome 自动填充重叠。
While autocomplete=“off”used to work, Chrome seems to ignore this value now, and show the UI anyway. The only thing I can find that works with Chrome 66/67 on OSX is an invalid value, such as autocomplete=“blah”. This seems way too sketchy though, and we have experimented with this before and it gets ignored in certain situations/Chrome versions.
虽然autocomplete=“off”以前可以工作，但 Chrome 现在似乎忽略了这个值，无论如何都会显示 UI。我能找到的唯一适用于 OSX 上的 Chrome 66/67 的是无效值，例如autocomplete=“blah”. 不过，这似乎太粗略了，我们之前已经对此进行了试验，但在某些情况下/Chrome 版本中它会被忽略。
Has anyone fond a reliable way to turn this off using HTML/Javascript?
有没有人喜欢使用 HTML/Javascript 关闭它的可靠方法？
As a side note - it looks like even Google can't turn it off when needed, as their own Google maps type-ahead widget gets overlaid by the Chrome autofill. This can be seen on most Shopify stores.
作为旁注 - 看起来即使是谷歌也无法在需要时将其关闭，因为他们自己的谷歌地图提前输入小部件被 Chrome 自动填充覆盖。这可以在大多数 Shopify 商店中看到。
采纳答案by mohammed hekal
jquery.disable-autofill
jquery.disable-autofill
Disable Chrome's autofill. Handy for CRUD forms, when you don't want username/password inputs to be autofilled by the browser.
禁用 Chrome 的自动填充。当您不希望浏览器自动填充用户名/密码输入时，适用于 CRUD 表单。
Usage:
用法：
<form>
<input type="input" name="username" autofill="off" autocomplete="off">
<input type="password" name="password" autofill="off" autocomplete="off">
</form>
<script src="jquery.disable-autofill.js"></script>
<script>
$('input[autofill="off"]').disableAutofill();
</script>
回答by Hari Das
autocomplete="off"doesn't workanymore. The only thing which works as of 2019is autocomplete="new-password"
autocomplete="off"不工作了。截至2019 年唯一有效的是autocomplete="new-password"
Check this link on Chromium Project https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
检查 Chromium 项目上的此链接 https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
Add an autocomplete attribute with a value of username for usernames.
If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.
Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.
Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.
If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.
为用户名添加一个值为 username 的自动完成属性。
如果您实施了“电子邮件优先”登录流程，将用户名和密码分成两个单独的表单，请在用于收集密码的表单中包含一个包含用户名的表单字段。当然，如果适合您的布局，您可以通过 CSS 隐藏此字段。
为登录表单上的密码字段添加值为 current-password 的自动完成属性。
为注册和更改密码表单上的密码字段添加一个值为 new-password 的自动完成属性。
如果您要求用户在注册或密码更新期间输入密码两次，请在两个字段中添加新密码自动完成属性。
<form id="login" action="signup.php" method="post">
<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">
<input type="submit" value="Sign Up">
</form>回答by Evading Shadows
You can just put autocomplete="new-password" in your password field and that's it. That should work just fine!
您可以将 autocomplete="new-password" 放在您的密码字段中，就是这样。那应该工作得很好！
回答by Rinat
Work to me
对我来说有效
<input [name]="nameControl" type="text" autocomplete="new-password">
in the component:
在组件中：
this.nameControl = "name" + this.getRandomInt();
getRandomInt() {
return Math.floor(Math.random() * Math.floor(100));
}
回答by kdion4891
Using jQuery in September, 2019. The only thing close to consistency I've achieved for disabling autocomplete/autofill on an entire form:
2019 年 9 月使用 jQuery。唯一接近一致性的事情是我在整个表单上禁用自动完成/自动填充：
$('.disable-autofill').focus(function () {
$(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
$(this).removeAttr('autocomplete');
});
Then apply class to your inputs e.g.:
然后将类应用于您的输入，例如：
<input name="first_name" class="disable-autofill">
You have to remove the attribute because if too many inputs have autocompletethen chrome starts ignoring it again :)
您必须删除该属性，因为如果输入过多，autocomplete则 chrome 会再次开始忽略它:)
回答by Aaron Plocharczyk
OLD ANSWER:
旧答案：
You can try brute force:
你可以试试蛮力：
function annihilateChromesAutocomplete(){
var clearAutocompleteInterval = setInterval(function(){
var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
}
}, 1);
setTimeout(function(){
clearInterval(clearAutocompleteInterval);
}, 2000);
}
UPDATE:
更新：
I've stumbled upon a simpler, cleaner solution to this. If you make the default typeof the input something weird like timeand then change the typedynamically with JavaScript when the page loads, Chrome will look for the nth timeinput and end up ignoring your inputs.
我偶然发现了一个更简单、更干净的解决方案。如果您type将输入设置为奇怪的默认值，time然后type在页面加载时使用 JavaScript 动态更改，Chrome 将查找第 n 个time输入并最终忽略您的输入。
window.addEventListener('load', function(){
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == "time"){
inputs[i].type = "text";
}
}
});<input type="time"/>
<input type="time"/>
<input type="time"/>回答by Anna Salata
If you don't need to save password in browser, here is a solution using just css. Select type="text" for input field:
如果您不需要在浏览器中保存密码，这里有一个仅使用 css 的解决方案。为输入字段选择 type="text"：
<input class="text-security-disc" type="text">
and add style to input, which hides text:
并为输入添加样式，隐藏文本：
.text-security-disc {
-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;
}
This doesn't work for Mozilla Firefox, I've used this font: https://github.com/noppa/text-security
这不适用于 Mozilla Firefox，我使用了这种字体：https: //github.com/noppa/text-security
回答by Brian Burns
For React, you could do something like this -
对于 React，你可以做这样的事情 -
<input id={id} name={'a'+Math.random()} type="text" />
if all you need to do is access the input value elsewhere by the id, eg
如果您需要做的就是通过 id 访问其他地方的输入值，例如
const value = document.getElementById(id)
(This is partly how the jQuery Disable Auto Fill Plugin works).
（这部分是 jQuery 禁用自动填充插件的工作原理）。
回答by Jul
At this time (May, 2019) only autocomplete="new-password"is working well.
目前（2019 年 5 月）autocomplete="new-password"运行良好。
It can do programmatically with jQuery for example :
例如，它可以使用 jQuery 以编程方式执行：
$('form, input, select').attr('autocomplete', 'new-password');
回答by Srok
Not a very elegant sollution but it works. The autofill fires on document ready. If we disable the input fields for a second it fail and then we can re-enable the input forms. This can be usefull for login forms and user forms on cruds. A better approach will be to set some overlay with a loading animation or something more user friendly.
不是一个非常优雅的解决方案，但它有效。自动填充在文档就绪时触发。如果我们禁用输入字段一秒钟它会失败，然后我们可以重新启用输入表单。这对于 cruds 上的登录表单和用户表单非常有用。更好的方法是使用加载动画或对用户更友好的方式设置一些叠加层。
Jquery example:
jQuery 示例：
$(document).ready(function() {
$('#[FORM_ID] input').prop('disabled',true);
setTimeout(function(){ $('#[FORM_ID] input').prop('disabled',false); }, 1000);
});
Replace #[FORM_ID] with the id of your form.
将#[FORM_ID] 替换为您表单的 ID。
