禁用Chrome自动填充

本文翻译自:Disabling Chrome Autofill

This post is a Community Wiki . 这篇文章是社区维基 Edit existing answers to improve this post. 编辑现有答案以改善此职位。 It is not currently accepting new answers. 它当前不接受新的答案。 Learn more . 了解更多

I have been running into issues with the chrome autofill behavior on several forms. 我一直在遇到几种形式的Chrome自动填充行为问题。

The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set. 表单中的所有字段都有非常通用且准确的名称,例如“电子邮件”,“名称”或“密码”,并且还设置了autocomplete="off"

The autocomplete flag has successfully disabled the autocomplete behavior, where a dropdown of values appear as you start typing, but has not changed the values that Chrome auto-populates the fields as. 自动完成标记已成功禁用了自动完成行为,该行为会在您开始键入时出现一个下拉列表,但并未更改Chrome自动将字段填充为的值。

This behavior would be ok except that chrome is filling the inputs incorrectly, for example filling the phone input with an email address. 这种行为是可以的,除了chrome无法正确填写输入内容(例如,用电子邮件地址填充电话输入内容)。 Customers have complained about this, so it's verified to be happening in multiple cases, and not as some some sort of result to something that I've done locally on my machine. 客户对此有所抱怨,因此已证实它是在多种情况下发生的,而不是我在计算机上本地完成的操作的某种结果。

The only current solution I can think of is to dynamically generate custom input names and then extract the values on the backend, but this seems like a pretty hacky way around this issue. 我能想到的唯一当前解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是解决此问题的一种很怪异的方法。 Are there any tags or quirks that change the autofill behavior that could be used to fix this? 是否有任何可更改自动填充行为的标记或怪癖可用来解决此问题?


#1楼

参考:https://stackoom.com/question/142Et/禁用Chrome自动填充


#2楼

I've just found that if you have a remembered username and password for a site, the current version of Chrome will autofill your username/email address into the field before any type=password field. 我刚刚发现,如果您记得某个网站的用户名和密码,则当前版本的Chrome会将您的用户名/电子邮件地址自动填充到任何type=password字段之前的字段中。 It does not care what the field is called - just assumes the field before password is going to be your username. 它不在乎该字段称为什么-只需假设该字段在密码将作为您的用户名之前即可。

Old Solution 旧解决方案

Just use <form autocomplete="off"> and it prevents the password prefilling as well as any kind of heuristic filling of fields based on assumptions a browser may make (which are often wrong). 只需使用<form autocomplete="off"> ,它就可以根据浏览器可能做出的假设(通常是错误的)防止密码预填充以及任何形式的启发式填充。 As opposed to using <input autocomplete="off"> which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it). 与使用<input autocomplete="off"> ,密码自动填充似乎几乎忽略了它(在Chrome中,Firefox确实服从了它)。

Updated Solution 更新的解决方案

Chrome now ignores <form autocomplete="off"> . Chrome现在会忽略<form autocomplete="off"> Therefore my original workaround (which I had deleted) is now all the rage. 因此,我原来的解决方法(已删除)现在风靡一时。

Simply create a couple of fields and make them hidden with "display:none". 只需创建几个字段,然后使用“ display:none”将其隐藏即可。 Example: 例:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Then put your real fields underneath. 然后在下面放置您的真实字段。

Remember to add the comment or other people on your team will wonder what you are doing! 记住要添加评论,否则团队中的其他人会想知道您在做什么!

Update March 2016 2016年3月更新

Just tested with latest Chrome - all good. 刚刚测试过最新的Chrome-都不错。 This is a fairly old answer now but I want to just mention that our team has been using it for years now on dozens of projects. 现在这是一个相当老的答案,但是我想提一下,我们的团队已经在许多项目上使用了多年。 It still works great despite a few comments below. 尽管下面有一些评论,它仍然可以正常工作。 There are no problems with accessibility because the fields are display:none meaning they don't get focus. 可访问性没有问题,因为这些字段display:none表示它们没有得到关注。 As I mentioned you need to put them before your real fields. 正如我提到的,您需要将它们放在实际字段之前

If you are using javascript to modify your form, there is an extra trick you will need. 如果您使用javascript修改表单,则需要额外的技巧。 Show the fake fields while you are manipulating the form and then hide them again a millisecond later. 在处理表单时显示假字段,然后在一毫秒后再次隐藏它们。

Example code using jQuery (assuming you give your fake fields a class): 使用jQuery的示例代码(假设您为假字段提供了一个类):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

Update July 2018 2018年7月更新

My solution no longer works so well since Chrome's anti-usability experts have been hard at work. 由于Chrome的反可用性专家一直在努力工作,因此我的解决方案不再有效。 But they've thrown us a bone in the form of: 但是他们以以下形式向我们扔了骨头:

<input type="password" name="whatever" autocomplete="new-password" />

This works and mostly solves the problem. 这行得通,并且大部分可以解决问题。

However, it does not work when you don't have a password field but only an email address. 但是,如果您没有密码字段,而只有一个电子邮件地址,则无法使用。 That can also be difficult to get it to stop going yellow and prefilling. 也可能很难使它停止变黄并预填充。 The fake fields solution can be used to fix this. 伪字段解决方案可用于解决此问题。

In fact you sometimes need to drop in two lots of fake fields, and try them in different places. 实际上,有时您需要放入两个假字段,然后在不同的地方尝试。 For example, I already had fake fields at the beginning of my form, but Chrome recently started prefilling my 'Email' field again - so then I doubled down and put in more fake fields just before the 'Email' field, and that fixed it. 例如,我在表单的开头已经有假字段,但是Chrome最近又开始重新填充“电子邮件”字段-因此,我加倍并在“电子邮件”字段之前放置了更多假字段,并对此进行了修复。 Removing either the first or second lot of the fields reverts to incorrect overzealous autofill. 删除第一批或第二批字段将还原为不正确的过度热情的自动填充。


#3楼

Try the following jQuery code which has worked for me. 尝试以下对我jQuery代码。

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

#4楼

Try this. 尝试这个。 I know the question is somewhat old, but this is a different approach for the problem. 我知道这个问题有些古老,但这是解决问题的另一种方法。

I also noticed the issue comes just above the password field. 我还注意到问题刚好在password字段上方。

I tried both the methods like 我尝试了两种方法

<form autocomplete="off"> and <input autocomplete="off"> but none of them worked for me. <form autocomplete="off"><input autocomplete="off">但是它们都不适合我。

So I fixed it using the snippet below - just added another text field just above the password type field and made it display:none . 因此,我使用下面的代码段对其进行了修复-只是在密码类型字段上方添加了另一个文本字段,并将其display:none

Something like this: 像这样:

<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="" />

Hope it will help someone. 希望它会帮助某人。


#5楼

The only way that works for me was:(jQuery required) 对我有用的唯一方法是:(需要jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

#6楼

There's two pieces to this. 这有两部分。 Chrome and other browsers will remember previously entered values for field names, and provide an autocomplete list to the user based on that (notably, password type inputs are never remembered in this way, for fairly obvious reasons). Chrome和其他浏览器将记住以前输入的字段名称值,并根据此值向用户提供自动完成列表(值得注意的是,出于明显的原因, 永远不会以这种方式记住密码类型的输入)。 You can add autocomplete="off" to prevent this on things like your email field. 您可以添加autocomplete="off"来防止在诸如电子邮件字段之类的情况下发生这种情况。

However, you then have password fillers. 但是,您将拥有密码填充符。 Most browsers have their own built-in implementations and there's also many third-party utilities that provide this functionality. 大多数浏览器都有自己的内置实现,并且还有许多第三方实用程序提供此功能。 This, you can't stop. 这,你不能停止。 This is the user making their own choice to save this information to be automatically filled in later, and is completely outside the scope and sphere of influence of your application. 这是用户自己选择保存此信息以在以后自动填充的信息,并且完全超出了应用程序的范围和影响范围。

发布了0 篇原创文章 · 获赞 52 · 访问量 35万+

猜你喜欢

转载自blog.csdn.net/CHCH998/article/details/105593590