Html 如何禁用 Chrome 自动填充用户名/电子邮件密码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40200130/
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
How to disable Chrome to autofill username/email password?
提问by Umair
I know its been answered many times on SO but that is for older versions of Chrome.
我知道它在 SO 上被多次回答，但这是针对旧版本的 Chrome。
I have Chrome Version 53.0.2785.143.
我有 Chrome 版本 53.0.2785.143。
I want to disable Chrome to autofill password fields,
我想禁用 Chrome 自动填充密码字段，
I have tried all methods mentioned in older SO answers,
我已经尝试了较旧的 SO 答案中提到的所有方法，
Method 1:
方法一：
Tried using fake username passwords.
尝试使用假用户名密码。
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
Method 2:
方法二：
Tried using autocomplete='new-password'and autocomplete='false'and autocomplete='off'
尝试使用autocomplete='new-password'与autocomplete='false'和autocomplete='off'
But none of it works.
但它都不起作用。
回答by Sachith
Try thisdisplay:none
尝试这个display:none
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />
You can also use jQueryto solve this problem,hope this will be helped to you,if not please put a comment here,good luck :)
你也可以jQuery用来解决这个问题，希望这对你有帮助，如果没有请在这里发表评论，祝你好运:)
Update:
更新：
This is depend on chrome version,sometimes this will be not work for chrome new versions,so you should have try many things to prevent this problem,try these code snippets also and please put a comment what happened :)
这取决于 chrome 版本，有时这不适用于 chrome 新版本，所以你应该尝试很多方法来防止这个问题，也尝试这些代码片段，请评论发生了什么:)
Solution 2
解决方案2
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.
它从元素中删除“name”和“id”属性，并在 1 毫秒后将它们分配回来。把这个放在文档里准备好。
Solution 3
解决方案3
<input type="text" name="email">
<input type="password" name="password" autocomplete="new-password">
Tested and works in Chrome 53
在 Chrome 53 中测试和工作
Solution 4
解决方案4
try autocomplete="false"instead of autocomplete="off"or nofill
尝试autocomplete="false"代替autocomplete="off"或nofill
回答by Jeevanantham Dharma
- 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.
<input type="text" autocomplete="username"> <input type="password" autocomplete="current-password">
- 为用户名添加一个值为 username 的自动完成属性。
- 如果您实施了“电子邮件优先”登录流程，将用户名和密码分为两个单独的表单，请在用于收集密码的表单中包含一个包含用户名的表单字段。当然，如果适合您的布局，您可以通过 CSS 隐藏此字段。
- 为登录表单上的密码字段添加值为 current-password 的自动完成属性。
- 为注册和更改密码表单上的密码字段添加一个值为 new-password 的自动完成属性。
如果您要求用户在注册或密码更新期间输入密码两次，请在两个字段中添加新密码自动完成属性。
<input type="text" autocomplete="username"> <input type="password" autocomplete="current-password">
回答by RAGINROSE
According to Mozilla doc, In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
根据 Mozilla 文档，在大多数现代浏览器中，将自动完成设置为“关闭”不会阻止密码管理器询问用户是否要保存用户名和密码信息，或自动填写站点登录表单中的这些值。
you have to use
你必须使用
autocomplete = "new-password"
When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password
创建新帐户或更改密码时，这应该用于“输入您的新密码”或“确认新密码”字段，而不是可能存在的一般“输入您的当前密码”字段。浏览器可以使用它来避免意外填写现有密码并帮助创建安全密码
You can see all autocomplete values herefor reference and better understanding.
您可以在此处查看所有自动完成值以供参考和更好地理解。
回答by Ivan Pavlov
In a scenario where the admin wants to change user's email/password the auto-fill replaced the users' email with the admin's and filled admin's password.
在管理员想要更改用户的电子邮件/密码的情况下，自动填充将用户的电子邮件替换为管理员和填写的管理员密码。
What worked for me was to set the fields (email, password ...) to disabled and enable them with tiemout a second after the page is loaded. In such way they become available to the user after the browser autofill ignored them.
对我有用的是将字段（电子邮件、密码...）设置为禁用状态，并在页面加载后一秒钟使用 tiemout 启用它们。通过这种方式，在浏览器自动填充忽略它们后，它们对用户可用。
The risk is that something breaks the js and they remain unavailable.
风险是某些东西破坏了 js 并且它们仍然不可用。
If your server part doesn't depend much on the input names, I would recommend just to change them to differ from those used in the login form - they will be not auto filled (unless you request it specifically).
如果您的服务器部分不太依赖于输入名称，我建议只将它们更改为与登录表单中使用的名称不同 - 它们不会自动填充（除非您特别要求）。
Otherwise here is the example code:
否则这里是示例代码：
<input id="email" type="email" name="email" value="[email protected]" disabled>
<input id="password" type="password" name="password" disabled>
<script>
$(document).ready(function(){
setTimeout(
function(){
$('#myform input[diabled]').removeAttr('disabled');
}, 1000);
);
</script>
回答by Kurtis Welch
Chrome will only autofill a password if the input type="password"- it would otherwise risk exposing the user's password in plain text. So, use type="text"on the input field, and then change the type attribute to "password"when the user focuses on the input.
Chrome 只会在输入时自动填充密码type="password"- 否则会有以纯文本形式暴露用户密码的风险。因此，type="text"在输入字段上使用，然后将 type 属性更改"password"为用户关注输入时。
Password Field:
密码字段：
<input type="text" class="form-control" placeholder="Password"
onfocus="this.setAttribute('type', 'password')" />
Full Example:(using Bootstrap 3 classes and Font Awesome icons)
完整示例：（使用 Bootstrap 3 类和 Font Awesome 图标）
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email Address" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Password"
onfocus="this.setAttribute('type', 'password')" />
</div>
<div class="text-xs-center">
<button type="submit" class="btn btn-primary" style="width: 100%;">
<i class="fa fa-lock" style="padding-right: 10px;"></i> LOG IN
</button>
</div>
</form>
回答by wesleysmyth
One potential solution for this could be to initially set the input type to "text", and then add an event listener for the input that updates the type to "password" once the field is edited. This would allow you to retain all of the features of a password input and hopefully circumvent any password autofills / managers. Something like:
对此的一种潜在解决方案可能是最初将输入类型设置为“文本”，然后为输入添加一个事件侦听器，在编辑字段后将类型更新为“密码”。这将允许您保留密码输入的所有功能，并有望绕过任何密码自动填充/管理器。就像是：
HTML
HTML
<input type='text' class='my-input' />
JS
JS
const input = document.querySelector('.my-input');
input.addEventListener('keydown', () => {
input.setAttribute('type', 'password');
});
回答by Terry Lin
Use jQuery disableAutoFill plugin
使用 jQuery disableAutoFill 插件
$('#login-form').disableAutoFill();
Document: https://github.com/terrylinooo/jquery.disableAutoFill
文档：https: //github.com/terrylinooo/jquery.disableAutoFill
回答by Dante Rosales Díaz
Simple alternative solution
简单的替代解决方案
I also ran into this problem, and as of May 22, 2020, I couldn't find a way of making my webapp to avoid filling out the password field, so I found an alternative to this, here it is:
我也遇到了这个问题，截至 2020 年 5 月 22 日，我找不到让我的 web 应用程序避免填写密码字段的方法，所以我找到了一个替代方法，这里是：
On the input field where the user puts its password, change its type to text, this will avoid having all saved passwords for the application to pop up, then style the input to make it look like a conventional password input by adding:
在用户输入密码的输入字段上，将其类型更改为文本，这将避免弹出应用程序的所有已保存密码，然后通过添加以下内容来设置输入样式以使其看起来像传统的密码输入：
style="text-security:disc; -webkit-text-security:disc;"
Example:
例子：
It is as simple as changing:
它就像改变一样简单：
<input type="password">
to:
到：
<input type="text" style="text-security:disc; -webkit-text-security:disc;">
or even more, you can omit the type attribute:
甚至更多，您可以省略 type 属性：
<input style="text-security:disc; -webkit-text-security:disc;">
Cheers!
干杯!
回答by Anand Singh
For me as of 22/02/2019, I tried these but not got a working solution.
I tried with visibility, display, autocompleteand seems like its not working. May be I am missing something as I am using Material UI.
对我而言，截至 2019 年 2 月 22 日，我尝试了这些，但没有找到可行的解决方案。我尝试过visibility, display，但autocomplete似乎不起作用。可能是我在使用 Material UI 时遗漏了一些东西。
For me I got two solution working. This is JSXcode you can use the same property with native html css syntax
对我来说，我有两个解决方案。这是JSX代码，您可以使用与本机 html css 语法相同的属性
1) with opacity and position
1）具有不透明度和位置
<input type="email" style={{opacity:"0", position:"absolute"}}/>
<input type="password" style={{opacity:"0", position:"absolute"}}/>
2) with z-index and position
2) 使用 z-index 和位置
<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>
Hope this will save someone's time.
希望这会节省某人的时间。
回答by eug
I've finally found success using a textareawith an event handler that replaces each character typed with a "?".
我终于发现使用textarea带有事件处理程序的a 取得了成功，该处理程序将每个键入的字符替换为“？”。
