Html 停止谷歌浏览器自动填充输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18531437/
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
Stop Google chrome auto fill the input
提问by Ben
I have a input type textfor user to change their email & passwordin account setting page.
我有一个input type text用户可以在帐户设置页面中更改他们的电子邮件和密码。
How can stop Chromeauto fill the input.
如何停止Chrome自动填充输入。
Chromeremember the input datafrom log inpage and it auto fill in account setting page.
Chrome记住了input data从登录页面，它会自动填写帐户设置页面。
Chromeauto fill the inputchange my email & passwordin account setting page
Chrome在帐户设置页面自动填写input更改我的电子邮件和密码
采纳答案by Roy M J
Are you explicitly setting the values as blank? For example:
您是否明确将值设置为空白？例如：
<input type="text" name="textfield" value="">
That should stop browsers putting data in where it shouldn't. Alternatively, you can add the autocomplete attribute to the form tag:
这应该会阻止浏览器将数据放在不应该的地方。或者，您可以将 autocomplete 属性添加到表单标签：
<form autocomplete="off" ...></form>
回答by Peo Bondesson
We are no longer dependent on hacks for this. You can set autocomplete to new-password and it will work as intended.
我们不再为此依赖黑客。您可以将自动完成设置为新密码，它将按预期工作。
<input type="password" name="pwd" autocomplete="new-password">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
回答by Sangram Nandkhile
Solution 1:Putting 2 lines of code under under <form ..>tag does the trick.
解决方案 1：将 2 行代码放在<form ..>标记下即可。
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Solution 2:It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.
解决方案 2：它从元素中删除“name”和“id”属性，并在 1 毫秒后将它们分配回来。把这个放在文档里准备好。
$('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);
});
Solution 3:Tested in Chrome 60.0.3112.101
解决方案 3：在 Chrome 60.0.3112.101 中测试
<input type="password" name="pwd" autocomplete="new-password">
回答by DefaultError
This issue still exists as of Version 55.0.2883.87 m. (on Windows 10)
从版本 55.0.2883.87 m 开始，此问题仍然存在。（在 Windows 10 上）
Solutions like setting the autocomplete attribute on a form
解决方案，例如在表单上设置自动完成属性
or adding fake input fields and removing the name attribute before submit do not work anymore, since Chrome ignores or instantly auto-completes them on removal.
或者在提交之前添加虚假输入字段并删除 name 属性不再起作用，因为 Chrome 在删除时会忽略或立即自动完成它们。
The only way to get it currently to work as intended is to set the autocomplete attribute to "new-password"
当前让它按预期工作的唯一方法是将自动完成属性设置为“新密码”
<input type="text" name="text" autocomplete="new-password">
even on non password type inputs.
即使在非密码类型输入上。
回答by Richard Kennard
The latest version of Chrome (46.0.2490.86) appears to have changed behaviour again. This time, AutoFill has nothing to do with autocompleteor readonlyor other workarounds suggested here (and on these bug reports https://code.google.com/p/chromium/issues/detail?id=468153, https://bugs.chromium.org/p/chromium/issues/detail?id=587466)
最新版本的 Chrome (46.0.2490.86) 似乎再次改变了行为。这一次，自动填充有无关autocomplete或readonly或这里提出其他解决方法（和这些错误报告https://code.google.com/p/chromium/issues/detail?id=468153，HTTPS：//bugs.chromium .org/p/chromium/issues/detail?id=587466)
Rather, AutoFill now looks at the labelnext to the input box and generates an AutoFill based on that (as well as the id and name). A big clue is how AutoFill can actually fill multiple fields at once (e.g. Street, Suburb and State). It appears to be using several techniques (label, name, id) to discern the spatial relationship between fields.
相反，自动填充现在查看输入框旁边的标签，并基于该标签（以及 id 和名称）生成自动填充。一个重要的线索是自动填充实际上如何一次填充多个字段（例如街道、郊区和州）。它似乎在使用多种技术（标签、名称、ID）来辨别字段之间的空间关系。
So a workaround is to insert junk text into the label inside a hidden span...
因此，解决方法是将垃圾文本插入隐藏跨度内的标签中......
S<span style="display:none">_</span>uburb:
...and also obfuscate/remove the id and name. This was the only thing that prevented Suburb AutoFill for me.
...并混淆/删除 ID 和名称。这是我阻止郊区自动填充的唯一原因。
回答by etzzzz
Unfortunately autocomplete="off"didn't work for me (anymore). So here is my solution:
不幸的是autocomplete="off"（不再）对我有用。所以这是我的解决方案：
First read and then remove "name" and "id" attributes from elements. Then, after 1ms, set these attributes back again with values read before. For me it works :)
首先读取然后从元素中删除 " name" 和 " id" 属性。然后，在 1 毫秒后，使用之前读取的值再次设置这些属性。对我来说它有效:)
<form autocomplete="off"><br />
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
</form>
<pre>
$('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);
});
</pre>
回答by Frank Kwok
By setting autocomplete="new-password" , it works. Before testing, you clear browsing data first
通过设置 autocomplete="new-password" ，它可以工作。测试前先清除浏览数据
回答by juliuslaak
Chrome ignores both autocomplete="anything" and hidden fields. A HTML/CSS workaround would be using an absolute positioned password field before the real one:
Chrome 会忽略 autocomplete="anything" 和隐藏字段。HTML/CSS 解决方法是在真正的密码字段之前使用绝对定位的密码字段：
<input type="text" name="username" required>
<input style="visibility: hidden; position: absolute; left:-99999px" type="password" name="fakepasswordfieldtoturnoffautocomplete">
<input type="password" name="password" required>
EDIT:
编辑：
As referred in multiple other answers in other duplicate questions, the most elegant working solution so far is this:
正如其他重复问题中的多个其他答案所述，迄今为止最优雅的工作解决方案是：
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
回答by Nappz
Almost jumped out the window trying to solve this... seems Google now ignores Autocomplete ON and OFF. I had used on older fix (such as fake hidden password fields - which also no longer worked). Based on the living standard spec - you need to use an auto-fill tokens instead. You must use them in the appropriate use-case context. Hope this is helpful.
几乎跳出窗口试图解决这个问题......似乎谷歌现在忽略了自动完成的开启和关闭。我使用过较旧的修复程序（例如假隐藏密码字段 - 也不再有效）。基于生活标准规范 - 您需要改用自动填充令牌。您必须在适当的用例上下文中使用它们。希望这是有帮助的。
回答by Fatih
Try hidden password element
尝试隐藏密码元素
<form>
<input type="text" name="fakeusername" class="fake-autofill-fields"/>
<input type="password" name="fakepassword" class="fake-autofill-fields"/>
...
...
</form>
<script>
$(document).ready(function () {
$(".fake-autofill-fields").show();
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1);
});
</script>
