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

Google chrome autofilling all password inputs

提问by Tyler

My Problem

我的问题

I must have turned on google to autofill for a login on my site, however it is trying to now autofill that login data whenever I want to edit my account info or edit another users account info (as an admin). It fills in my data in weird spots. The issue seems to be that Chrome auto fills any input with a type of password and then whatever the input before it is (see image below). If I put a select box before it then it won't autofill.

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

I obviously don't want to have to go through and delete the password/phone every time I edit a user. I also don't want my users to have to do that when they are editing their own account. How do I remove it?

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

What I have tried(with no success)

我尝试过的（没有成功）

• Adding autocomplete="off" to the form as well as both the phone and password inputs.
• Adding value="" to both inputs
• Changing the name= of the password input. I tried pw, pass, password, and cheese (incase chrome was picking up the name)
• Adding autocomplete="off" through the jquery .attr

• 将 autocomplete="off" 添加到表单以及电话和密码输入。
• 将 value="" 添加到两个输入
• 更改密码输入的名称=。我尝试了密码、通行证、密码和奶酪（以防 chrome 取名）
• 通过 jquery .attr 添加 autocomplete="off"

What I have found

我发现了什么

I found that Google may be intentionally ignoring autocomplete: Google ignoring autocomplete

我发现谷歌可能故意忽略自动完成：谷歌忽略自动完成

I found another user posting a similar question but the solution is not working for me: Disable Chrome Autofill

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

I also found another user doing a work around involving creating a hidden password field which would take the google autocomplete, I'd prefer a cleaner solution as in my case I would also need a hidden input above it to avoid both from autofilling: Disable autofill in chrome without disabling autocomplete

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

回答by PRTJ

In HTML5 with autocomplete attribute there is a new property called "new-password" which we can use to over come this issue. Following works for me.

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

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

current-password :Allow the browser or password manager to enter the current password for the site. This provides more information than "on" does, since it lets the browser or password manager know to use the currently-known password for the site in the field, rather than a new one.

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

new-password :Allow the browser or password manager to automatically enter the new password for the site. This might be automatically generated based on the other attributes of the control, or might simply tell the browser to present a "suggested new password" widget of some kind.

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

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

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

回答by dsuess

Sometimes even autocomplete=offwould not prevent to fill incredentials into wrong fields, but not user or nickname field.

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

Fix:browser autofill in by readonly-mode and set writable on focus

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

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

(focus = at mouse click and tabbing through fields)

（焦点 = 在鼠标单击和选项卡通过字段）

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

更新：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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/// UpdateEnd

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

Explanation:Browser auto fills credentials to wrong text field?

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

@Samir: Chrome auto fills any input with a type of password and then whatever the input before it is

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

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form.I guess, the browser looks for a password field to insert your saved credentials. Then it autofills usernameinto the nearest textlike-input field , that appears prior the password fieldin DOM (just guessing due to observation). As the browser is the last instance and you can not control it,

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

This readonly-fix above worked for me.

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

回答by Rob Porter

This can be solved without hacks, but it is not necessarily intuitive. There are two weird decisions that Chrome makes. First, Chrome ignores autocomplete="off"in its parsing, and second, Chrome assumes the field that comes before a password field must be a username/email field, and should be autocompleted as such.

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

There are ways around this though that leverage the HTML5 autocomplete attribute spec.

尽管利用 HTML5 自动完成属性规范，但有一些方法可以解决这个问题。

As you will see in the link below, there are standard values for the attribute autocomplete. To avoid having Chrome assuming the field before a password is an email field, use either one of the official values (e.g., telfor a phone number), or make up a value that does not exist on the list, but is also not offor false.

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

Google suggests you use one of the standard values with new-prepended to the value, e.g., autocomplete="new-tel". If you want a password field to not autocomplete, you can use autocomplete="new-password", for instance.

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

While technically you could of course make the attribute something random without context to the same effect (e.g. autocomplete="blahblahblah"), I recommend the new-prefix as it helps give any future developer working on your code some context of what you're accomplishing with this attribute.

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

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

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

回答by Denis Matafonov

• fake inputs dont work
• autocomplete="off" / "new-password" / "false" and so on dont work, chrome ingores them all

• 虚假输入不起作用
• autocomplete="off" / "new-password" / "false" 等等都不起作用，chrome 全部都输入了

Solution that workedfor us:

解决方案，努力为我们：

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

回答by unknownA

I would make a hidden password field instead of disabling auto-fill for chrome. Disabling auto-fill for you doesn't disable it for everyone.

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

So i got this.

所以我得到了这个。

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

(If you're just looking to disable it for yourself, Then disable it using chrome's settings.)

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

How to disable it with chromes settings:

如何使用 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.

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.

Credits go to heinkasner for that one.

归功于海因卡斯纳。

Other than those two methods, I don't think this is possible to disable it for all users.

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

回答by bmavus

Opacity

不透明度

We fixed this by adding a field and setting its opacity to 0. so chrome still think there is a field an filling it.

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

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

回答by pimkle

Chrome has updates, fake inputs are not working any more.

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

Chrome seems to remember everything after an success 200 net connection, whatever input[type=password] is activated on the screen will be remembered.

成功 200 网络连接后，Chrome 似乎会记住所有内容，屏幕上激活的任何输入 [type=password] 都会被记住。

I've tried dynamically set the inputs to type text, clearing the contents, they don't always work, especially when there is a button to get verify code before submitting the form.

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

Finally, I figured it out:

最后，我想通了：

listen to inputs focus and blur events,

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

everytime blur:

每次模糊：

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

everytime focus:

每次关注：

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

the side effect is obvious, input's content would change every focus and blur event, but this method prevent chrome from remembering password perfectly.

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