Google chrome autofilling all password inputs

Question

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

Answer 1

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

Solution that worked for 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>

Answer 2

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.

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

How to disable it with chromes settings:

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.

Answer 3

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.

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

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.

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

Answer 4

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.

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

Answer 5

I noticed that Chrome / FF browser ALWAYS auto-filled the text input immediately preceding the password field. So the simplest solution was to add a "dummy" input:

Answer 6

Sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.

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:

<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

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

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 username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it,

This readonly-fix above worked for me.