我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

试试这个。我知道这个问题有点老了,但这是解决这个问题的另一种方法。

我还注意到这个问题出现在密码字段的上方。

两种方法我都试过了

<form autocomplete="off">和<input autocomplete="off">,但它们都不适合我。

所以我使用下面的代码片段修复了它-只是在密码类型字段上方添加了另一个文本字段,并使其显示为: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="" />

希望它能帮助到一些人。

其他回答

Boom,谷歌Chrome和其他人尝试击败这然后。

我能够得到这个实现今天2017年9月7日,但使用在我的MVC视图中生成的随机字符串的FormCollection。

我会首先在我的登录页面的索引控制器中获得一个新的随机密钥,加密并创建一个新的完全唯一的随机字符串(我实际上使用了一个256位的cypher来执行此操作,以及一个唯一的cypher和认证密钥),然后在每个字符串的末尾附加纯文本“用户名”和“密码”,以帮助我从响应视图控制器识别用户名和密码。你也可以把这个普通字符串改成任何东西,只要你知道它的模式并且它是唯一的。

在我看来,我然后适当地使用这些变量,然后在响应控制器中—通过FormCollection搜索并找到匹配的变量—然后使用该项的Key-Value作为相应的用户名和密码进行适当的处理。

The other issue i had which i think is sneaky of Chrome, is that any Any thoughts ? <style> @@font-face { font-family: 'password'; font-style: normal; font-weight: 400; src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf); } </style> <input type="text" name="@Model.UsernameRandomNameString" /> <input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" /> LogOnModel model = new LogOnModel() { UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username", PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password", }; I think it a hell of a workaround, but hey it works, and i think it could also be future proof unless google determines the URL of the page has key words in it, then appropriately just adds its stupid extensions on top on any input field - but that's a little drastic.

这里有一个肮脏的hack -

你的元素在这里(添加了disabled属性):

<input type="text" name="test" id="test" disabled="disabled" />

然后在你的网页底部放一些JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

就像Dvd Franco说的,对我来说,只有把automplete='off'在所有领域它工作。所以我把jquery规则放在$(document).ready();函数在我的主.js文件

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

所以显然,最好的修复/黑客现在不再工作,再次。我使用的Chrome版本是49.0.2623.110 m和我的帐户创建形式现在显示保存的用户名和密码与形式无关。由于铬!其他黑客似乎很可怕,但这个黑客不那么可怕……

为什么我们需要这些黑客工作是因为这些形式通常是帐户创建形式,即不是登录形式,应该允许填写密码。帐户创建表单您不希望删除用户名和密码的麻烦。从逻辑上讲,这意味着在呈现时永远不会填充密码字段。所以我使用了一个文本框,加上一点javascript。

<input type="text" id="password" name="password" />

<script>
    setTimeout(function() {
        $("#password").prop("type", "password");
    }, 100); 
    // time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>

我认为这是可以接受的,因为用户不会在短时间内获得密码字段,并且如果该字段是密码字段,则发送回服务器没有任何区别,因为无论如何它都是以纯文本发送回来的。

Caveat: If, like me, you use the same creation form as an update form things might get tricky. I use mvc.asp c# and when I use @Html.PasswordFor() the password is not added to the input box. This is a good thing. I have coded around this. But using @Html.TextBoxFor() and the password will be added to the input box, and then hidden as a password. However as my passwords are hashed up, the password in the input box is the hashed up password and should never be posted back to the server - accidentally saving a hashed up hashed password would be a pain for someone trying to log in. Basically... remember to set the password to an empty string before the input box is rendered if using this method.

这是我最近使用的解决方案。

$('#email').prop('autocomplete', true);