Question

我的问题

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

Google autofilling registration with login details

每次编辑用户时，我显然不想通过并删除密码/手机。我也不希望我的用户在编辑自己的帐户时必须这样做。如何删除它？

我尝试了什么 （没有成功）

添加自动填充=＆＃34;关闭＆＃34;表格以及电话和密码输入。
增值=＆＃34;＆＃34;两个输入
更改密码输入的名称=。我尝试了pw，pass，密码和奶酪（因为铬正在拿起名字）
添加自动填充=＆＃34;关闭＆＃34;通过jquery .attr

我找到了什么

我发现Google可能会故意忽略自动填充功能：Google ignoring autocomplete

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

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

Answer 1

在具有自动填充属性的HTML5中，有一个名为＆＃34; new-password＆＃34;的新属性。我们可以用它来解决这个问题。以下为我工作。

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

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

新密码： 允许浏览器或密码管理器自动输入站点的新密码。这可能是根据控件的其他属性自动生成的，或者可能只是告诉浏览器提供一个建议的新密码＆＃34;某种小部件。

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

Answer 2

有时甚至自动完成=关闭 不会阻止将凭据填入错误的字段，但不会阻止用户或昵称字段。

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

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

（焦点=鼠标点击并在字段中标记）

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

<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/ // UpdateEnd

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

@Samir： Chrome会自动使用一种密码输入任何输入，然后输入任何输入

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

上面的readonly-fix对我有用。

Answer 3

这可以在没有黑客的情况下解决，但它不一定是直观的。 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

Answer 4

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

所以我得到了这个。

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

（如果你只是想为自己禁用它，那么使用chrome的设置禁用它。）

如何使用chromes设置禁用它：

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。

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

Answer 5

Chrome有更新，假输入不再有效。

Chrome似乎记住了网络连接成功后的所有内容，无论输入[type =密码]在屏幕上激活都会被记住。

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

最后，我想通了：

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

每次模糊：

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完全记住密码。

Answer 6

假输入不起作用
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>

Answer 7

不透明度

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

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

Answer 8

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

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

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

Answer 9

我注意到，Chrome / FF浏览器始终会自动在密码字段之前自动填写文本输入。因此，最简单的解决方案是添加“虚拟”输入：

Google Chrome自动填充所有密码输入

9 个答案: