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

问题描述 投票:17回答:6

我的问题

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

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

我尝试了什么(没有成功)

  • 将autocomplete =“off”添加到表单以及电话和密码输入。
  • 为两个输入添加值=“”
  • 更改密码输入的名称=。我尝试了pw,pass,密码和奶酪(因为chrome正在拿起这个名字)
  • 通过jquery .attr添加autocomplete =“off”

我发现了什么

我发现谷歌可能故意忽略自动完成:Google ignoring autocomplete

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

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

html forms google-chrome autocomplete autofill
6个回答
30
投票

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

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

current-password:允许浏览器或密码管理器输入站点的当前密码。这提供了比“on”更多的信息,因为它让浏览器或密码管理器知道在该字段中使用当前已知的站点密码,而不是新的密码。

new-password:允许浏览器或密码管理器自动输入站点的新密码。这可能是基于控件的其他属性自动生成的,或者可能只是告诉浏览器呈现某种“建议的新密码”小部件。

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


8
投票

有时甚至autocomplete = off也不会阻止将凭据填入错误的字段,而不是用户或昵称字段。

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

 <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对我有用。


8
投票

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

虽然利用HTML5自动完成属性规范,但有很多方法可以解决这个问题。

正如您将在下面的链接中看到的,属性autocomplete有标准值。为避免Chrome在密码为电子邮件字段之前假设该字段,请使用其中一个官方值(例如,tel表示电话号码),或者填写列表中不存在的值,但也不是off或者false

谷歌建议你使用new-之前的标准值之一,例如autocomplete="new-tel"。如果您希望密码字段不自动完成,则可以使用autocomplete="new-password"

虽然从技术上讲,你当然可以使属性随机而没有上下文同样的效果(例如autocomplete="blahblahblah"),我推荐new-前缀,因为它有助于任何未来的开发人员在你的代码上使用这个属性完成你正在完成的事情。

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


2
投票
  • 假输入不起作用
  • 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>


1
投票

我会创建一个隐藏的密码字段,而不是禁用自动填充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。

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


0
投票

Chrome有更新,虚假输入不再有效。

成功200网连接后,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完全记住密码。

© www.soinside.com 2019 - 2024. All rights reserved.