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

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.

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

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., tel for a phone number), or make up a value that does not exist on the list, but is also not off or 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.

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.

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

Answer 2

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

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

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.

Answer 3

I handle this problem with some simple js

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

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