谷歌浏览器自动填充所有密码输入答案

【问题标题】：Google chrome autofilling all password inputs谷歌浏览器自动填充所有密码输入
【发布时间】：2014-06-03 02:35:56
【问题描述】：

我的问题

我必须打开 google 来自动填充我网站上的登录信息，但它现在正尝试在我想编辑我的帐户信息或编辑其他用户的帐户信息（作为管理员）时自动填充该登录数据。它在奇怪的地方填充了我的数据。问题似乎是 Chrome 会自动用一种密码类型填充任何输入，然后是 之前的任何输入（见下图）。如果我在它前面放一个选择框，它就不会自动填充。

我显然不希望每次编辑用户时都必须检查并删除密码/电话。我也不希望我的用户在编辑自己的帐户时必须这样做。如何删除它？

我尝试过的 （没有成功）

向表单以及电话和密码输入添加 autocomplete="off"。
向两个输入添加 value=""
更改密码输入的名称=。我尝试了 pw、pass、password 和 cheese（以防 chrome 取名）
通过 jquery .attr 添加 autocomplete="off"

我发现了什么

我发现 Google 可能故意忽略自动完成功能：Google ignoring autocomplete

我发现另一个用户发布了类似的问题，但该解决方案对我不起作用：Disable Chrome Autofill

我还发现另一个用户正在解决涉及创建隐藏密码字段的工作，该字段将采用谷歌自动完成功能，我更喜欢更简洁的解决方案，因为在我的情况下，我还需要在其上方隐藏输入以避免自动填充：Disable autofill in chrome without disabling autocomplete

【问题讨论】：

尝试在表单中添加其他隐藏密码字段。这是一个肮脏的黑客，但唯一对我有用的解决方案。
是的，这是我找到的选项之一，但我正在寻找一种不是黑客的方法。
这快把我逼疯了。我似乎找不到一种非 hack 的方式来告诉谷歌我的管理页面上的字段的用途。
Chrome 可能还会检查标签值，而不仅仅是输入名称。有些人建议将 Password: 替换为 Password: 之类的东西。没有为我工作。我还尝试在页面加载后立即使用 jQuery 清理值 - 不走运。
请在此处查看我的解决方法：stackoverflow.com/questions/15738259/disabling-chrome-autofill/…

标签： html forms google-chrome autocomplete autofill

【解决方案1】：

在具有自动完成属性的 HTML5 中，有一个名为“new-password”的新属性，我们可以使用它来解决这个问题。以下对我有用。

<input id="userPassword" type="password" autocomplete="new-password">

当前密码： 允许浏览器或密码管理器输入站点的当前密码。这提供了比“on”更多的信息，因为它让浏览器或密码管理器知道在现场使用当前已知的站点密码，而不是新密码。

新密码： 允许浏览器或密码管理器自动输入站点的新密码。这可能是根据控件的其他属性自动生成的，或者可能只是告诉浏览器显示某种“建议的新密码”小部件。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

【讨论】：

注意：很遗憾，您无法动态更改 autocomplete 字段。如果您的密码字段更改了角色（可能是已知用户输入了他们的电子邮件），那么您应该使用两个密码字段 - 每种类型一个。 [截至今天的当前 Chrome]

【解决方案2】：

这可以在没有 hack 的情况下解决，但不一定是直观的。 Chrome 做出了两个奇怪的决定。首先，Chrome 在解析时会忽略 autocomplete="off"，其次，Chrome 假定密码字段之前的字段必须是用户名/电子邮件字段，并且应该自动完成。

有一些方法可以利用 HTML5 自动完成属性规范。

正如您将在下面的链接中看到的，autocomplete 属性有标准值。为避免 Chrome 将密码前的字段假定为电子邮件字段，请使用官方值之一（例如，tel 表示电话号码），或编造一个列表中不存在但也是不是off 或false。

Google 建议您使用其中一个标准值，并在值前加上 new-，例如 autocomplete="new-tel"。例如，如果您希望密码字段不自动完成，可以使用 autocomplete="new-password"。

虽然从技术上讲，您当然可以在没有上下文的情况下将属性随机化以达到相同的效果（例如 autocomplete="blahblahblah"），但我建议使用 new- 前缀，因为它有助于为任何未来开发您的代码的开发人员提供一些关于您的内容的上下文'用这个属性来完成。

参考：https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute

【讨论】：

【解决方案3】：

有时即使 autocomplete=off 也不会阻止将凭据填写到错误的字段中，但不会阻止用户或昵称字段。

修复：浏览器通过只读模式自动填充并在焦点上设置可写

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

（焦点 = 鼠标单击并在字段中切换）

更新：移动 Safari 将光标设置在字段中，但不显示虚拟键盘。新修复像以前一样工作，但处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/ // 更新结束

说明：浏览器自动将凭据填充到错误的文本字段？

@Samir：Chrome 会自动用一种密码类型填充任何输入，然后是之前的任何输入

有时我会在 Chrome 和 Safari 上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找密码字段来插入您保存的凭据。然后它自动填充 username 到最近的 textlike-input 字段中，该字段出现在 DOM 中的密码字段之前（只是由于观察而猜测）。由于浏览器是最后一个实例，你无法控制它，

上面的这个只读修复对我有用。

【讨论】：

别忘了在你的 CSS 中添加 input[readonly] { cursor: text; }
@dsuess 此解决方案有效，但它会在移动 safari 上阻止软键盘触发。当输入字段为只读时，onfocus 不会触发键盘弹出。所以这是唯一的解决方法，但它需要付出代价，我现在正试图解决这个问题
@caniaskyouaquestion 感谢您指出这一点。查看更新的脚本。
这个解决方案确实有效。令人难以置信的是，像 autocomplete="off" 这样的东西是如何不起作用的。当我重置密码时，我不想将旧密码设置到 Google 字段中...
这是一个出色的实现，感谢您为我节省了很多小时的搜索时间！

【解决方案4】：

假输入不起作用
autocomplete="off" / "new-password" / "false" 等不起作用，chrome 将它们全部导入

对我们有效的解决方案：

<script>
        $(document).ready(function(){

            //put readonly attribute on all fields and mark those, that already readonly
            $.each($('input'), function(i, el){
                if ($(el).attr('readonly')) {
                    $(el).attr('shouldbereadonly', 'true');
                } else {
                    $(el).attr('readonly', 'readonly');
                }
            });

            //Remove unnecessary readonly attributes in timeout
            setTimeout(function(){

                $.each($('input'), function(i, el){
                    if (!$(el).attr('shouldbereadonly')) {
                        $(el).attr('readonly', null);
                    }
                });

            }, 500);
        });
    </script>

【讨论】：

呃！这应该是公认的答案 - 我有一个页面，其中 chrome 不断用错误的值破坏用户提供的令牌（不是密码）并调整这是唯一有效的方法 - 谢谢伙计！

【解决方案5】：

我会创建一个隐藏的密码字段，而不是禁用 chrome 的自动填充。为您禁用自动填充不会为所有人禁用它。

所以我得到了这个。

<input type="hidden" name="Password" id="Password" value="Password" /><br />

（如果您只是想自己禁用它，请使用 chrome 的设置禁用它。）

如何使用 chrome 设置禁用它：

Click the Chrome menu Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings and find the "Passwords and forms" section.
Deselect the "Enable Autofill to fill out web forms in a single click" checkbox.

该作品归功于 heinkasner。

除了这两种方法，我认为不可能对所有用户禁用它。

【讨论】：

感谢您的回复，但是这个答案已经在我链接到的其他线程中提出。我对这个问题的目标是尝试找到一个干净的解决方案，而不是解决方法。

【解决方案6】：

Chrome 有更新，虚假输入不再起作用。

Chrome 似乎会记住成功 200 次网络连接后的所有内容，无论在屏幕上激活什么 input[type=password] 都会被记住。

我尝试过将输入动态设置为输入文本，清除内容，但它们并不总是有效，尤其是在提交表单之前有一个获取验证码的按钮时。

最后，我想通了：

监听输入焦点和模糊事件，

每次模糊：

var psw1 = $('input[name=psw1]').val();
$('input[name=psw1]').val((new Array(psw1.length)).join('*'));
$('input[name=psw1]').attr('type', 'text');

每次关注：

$('input[name=psw1]').attr('type', 'password');
$('input[name=psw1]').val(psw1)

副作用很明显，输入的内容会改变每个焦点和模糊事件，但是这种方法会阻止chrome完美记住密码。

【讨论】：

【解决方案7】：

不透明度

我们通过添加一个字段并将其不透明度设置为 0 来解决此问题。因此 chrome 仍然认为有一个字段可以填充它。

    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;

【讨论】：

【解决方案8】：

我注意到 Chrome / FF 浏览器总是自动填充密码字段之前的文本输入。所以最简单的解决方案是添加一个“虚拟”输入：

【讨论】：

【解决方案9】：

我用一些简单的js来处理这个问题

<input type="password" name="password" class="autocomplete-off" readonly="readonly">

// autocomplete
$('input.autocomplete-off').click(function () {
    $(this).removeAttr('readonly');
});

【讨论】：