logo标签列表

如何禁用Chrome的自动填充用户名/电子邮件密码？

htmlgoogle-chrome
40
我知道这个问题在StackOverflow上已经被回答了很多次，但那些答案都是针对旧版本的Chrome。
我使用的是Chrome 53.0.2785.143版本。
我想让Chrome在密码字段上禁用自动填充。
我尝试过所有在旧版StackOverflow答案中提到的方法。
方法1：
我尝试使用虚假的用户名和密码。
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

方法2：

我尝试使用 autocomplete='new-password' 和 autocomplete='false' 以及 autocomplete='off'，但这些都不起作用。

我认为这是不可能的。我只知道针对autocomplete="off"的解决方法，但正如你提到的那样，这并不是一个解决方案。我认为唯一的方法是为您的输入生成名称。这只是我的意见。 - user5660692
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - yivo
可能是去除自动填充时输入框上的黄色背景的重复问题。 - Amr Elgarhy
使用JavaScript，尝试https://github.com/terrylinooo/disableautofill.js。 - Terry Lin
17个回答
34

试试这个 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="" />

您也可以使用jQuery来解决这个问题，希望对您有所帮助。如果没有，请在此处评论，祝你好运：）

更新：

这取决于Chrome版本，有时这在Chrome新版本中不起作用，因此您应该尝试许多方法来防止这个问题，同时也请尝试这些代码片段，并在评论中告诉我们结果：）

解决方案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);
            });

它从元素中删除“name”和“id”属性，并在1毫秒后重新分配它们。将此放入文档准备好的函数中。

解决方案3

<input type="text" name="email">
<input type="password" name="password" autocomplete="new-password">

在Chrome 53中经过测试并有效

解决方案4

尝试使用autocomplete="false"代替autocomplete="off"或nofill

这些解决方案都对我无效。我正在运行 Windows 10 上的 Chrome 57.0.2987.133（64位）。 - cristiancastrodc
5
我非常讨厌 Chrome 的自动填充功能。当然我可以在我的电脑上禁用它，但是我无法在每台使用我的应用程序的电脑上禁用它，所以这不是一个解决方案 =/ - cristiancastrodc
10
谢谢！对于我来说，解决方案3在Chrome 60.0.3112.90中有效。 - Maxim Mazurok
1
这是我们发现的，Chrome故意忽略自动完成属性，请参见线程中的最后一个答案 https://bugs.chromium.org/p/chromium/issues/detail?id=468153 - Harry
7
截至2017年9月17日，添加 autocomplete="new-password" 是正确的做法。 - kjdion84
显示剩余3条评论
21
根据 Mozilla 文档，在大多数现代浏览器中，将自动填充属性设置为“关闭”不会防止密码管理器询问用户是否要保存用户名和密码信息，也不会阻止其自动填充登录表单中的这些值。
您需要使用：
autocomplete = "new-password"

在创建新帐户或更改密码时，应使用此字段用于"输入新密码"或"确认新密码"，而不是可能存在的通用"输入当前密码"字段。浏览器可以使用此选项来避免意外填写现有密码，并提供帮助以创建安全密码。

您可以在此处查看所有自动完成值，以供参考和更好地理解。

1
在所有发布的解决方案中，它是唯一能够在Chrome 79上正常工作且不会感觉到繁琐的方法。非常感谢！ - romaricdrigon
无法使用管理员密码。 - Luis Alfredo Serrano Díaz
12

简单的替代方案

我也遇到了这个问题，截至2020年5月22日，我找不到让我的webapp避免填写密码字段的方法，所以我找到了一个替代方法，如下：

在用户输入密码的输入框上，将其类型更改为文本，这将避免所有已保存的应用程序密码弹出，然后通过添加样式将其外观变成常规密码输入框：

style="text-security:disc; -webkit-text-security:disc;"

示例：

只需更改以下内容即可简单完成：

<input type="password">

致：

<input type="text" style="text-security:disc; -webkit-text-security:disc;">

甚至可以省略type属性：

<input style="text-security:disc; -webkit-text-security:disc;">

干杯！

更新：

如评论中指出，此解决方案在Firefox上不起作用，请参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-text-security，尽管原始问题只要求在Chrome上找到解决方案，但我找到了一个新的解决方案（不确定是否对所有人有用）：我创建了一个仅由圆盘组成的字体（模拟密码字段），并似乎起作用，请注意，我不是专业的字体制作人，我已经尽力了。我没有仔细测试过这个解决方案，但乍一看好像做到了这一点。链接到我使用Font Forge制作的字体：https://drive.google.com/file/d/1xWGciDI-cQVxDP_H8s7OfdJt44ukBWQl/view?usp=sharing

请测试此功能并告诉我它是否有效。

示例

将ttf文件放在创建html文件的相同目录中

<!DOCTYPE html>
<html>
    <head>
        <title>Font Test</title>
    </head>
    <body>
        <span>Custom font</span><input class="disk-font" type="text"/>
        <span>Normal Font</span><input type="password"/>
    </body>
    <style>
            @font-face {
                font-family: disks;
                src: url(disks.ttf);
            }
            .disk-font{
                font-family: disks;

            }
    </style>
</html>
这是一个非常好的解决方案，对我来说将输入设置为文本并使用-webkit-text-security：disc; 就可以完成工作。 - user2169241
3

直到我用表单包装输入内容，才获得了成功

3
  1. Add an autocomplete attribute with a value of username for usernames.
  2. 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.
  3. Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.
  4. Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

  5. 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">
这个在Chrome上非常好用，与其他解决方案相比，其他的都有些hacky。谢谢。 - João Antunes
1
当您使用 type="hidden" 隐藏字段时，它在2019年2月对我无效。 - AlexioVay
2
在Chrome 87中，为了防止Chrome自动填充，三种方法的组合几乎完全解决了这个问题：
  1. 在输入标签和表单标签中添加autocomplete='chrome-off'属性。对于Rails的表单帮助程序，我需要在页面加载后使用JS来setAttribute('autocomplete', 'chrome-off')
  2. 如果仍然存在一些自动完成/自动填充功能（填写相同的表单几次以检查它），请在name属性前添加前缀_。在我的情况下，它是<input name='user[_country]'
  3. 对于英语以外的语言环境，仍然存在一些自动填充的残留物。在name属性中再添加一个下划线可以解决这个问题，例如<input ... name='user[_c_ountr_y]'
编辑：
  1. 在生产环境中，用户输入被缓存时，发现还需要执行此步骤才能防止Chrome自动填充下拉列表。
2

如果输入框的 type="password"，Chrome 才会自动填充密码——否则就会有泄露用户密码的风险。因此，请在输入框上使用 type="text"，当用户点击输入框时再将 type 属性更改为 "password"。

密码输入框：

<input type="text" class="form-control" placeholder="Password"
    onfocus="this.setAttribute('type', 'password')" />

完整示例： （使用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>
5
在Chrome上不再起作用……当你聚焦在该字段时，它会自动填充。 - Arvy
1
停止使用“用户”这个词来命名字段，例如，如果您使用“user-action”，请更改为“u-action”，Google将停止向该字段提供电子邮件或用户名。
1
在管理员想要更改用户的电子邮件/密码的情况下，自动填充将用户的电子邮件替换为管理员的电子邮件，并填写管理员的密码。
对我有用的方法是将字段（电子邮件，密码等）设置为禁用状态，并在页面加载后一秒钟启用它们。这样，当浏览器自动填充忽略它们时，它们变得可用于用户。
风险在于某些东西会破坏JS并使它们仍然不可用。 如果您的服务器部分不太依赖输入名称，我建议只需将其更改为与登录表单中使用的名称不同即可-它们将不会自动填充（除非您明确请求）。 否则，以下是示例代码：
 <input id="email" type="email" name="email" value="email@example.com" disabled>
    <input id="password" type="password" name="password" disabled>
    
    <script>
    $(document).ready(function(){
         setTimeout(
            function(){
                $('#myform input[disabled]').removeAttr('disabled');
            }, 1000);
    );
    </script>
0
非常晚才回答这个问题，但是上面的任何解决方案都对我没有用，无论使用哪种浏览器。
<input type="email" name="email" id="email" readonly onfocus="this.removeAttribute('readonly');">

它帮助我解决了这个问题，因为它首先将字段设置为只读，这样浏览器就不会像普通字段一样填充它，当DOM加载完成并且用户单击该字段以进行填充时，它将删除只读属性，并保存密码，浏览器将显示建议。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接