Disabling Chrome Autofill

Question

I have been running into issues with the chrome autofill behavior on several forms.

The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set.

The autocomplete flag has successfully disabled the autocomplete behavior, where a dropdown of values appear as you start typing, but has not changed the values that Chrome auto-populates the fields as.

This behavior would be ok except that chrome is filling the inputs incorrectly, for example filling the phone input with an email address. Customers have complained about this, so it's verified to be happening in multiple cases, and not as some some sort of result to something that I've done locally on my machine.

The only current solution I can think of is to dynamically generate custom input names and then extract the values on the backend, but this seems like a pretty hacky way around this issue. Are there any tags or quirks that change the autofill behavior that could be used to fix this?

Answer 1

For username password combos this is an easy issue to resolve. Chrome heuristics looks for the pattern:

<input type="text">

followed by:

<input type="password">

Simply break this process by invalidating this:

<input type="text">
<input type="text" onfocus="this.type='password'">

Answer 2

The only way that works for me was:(jQuery required)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Answer 3

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

adding readonly attribute to the tag along with the onfocus event removing it fixes the issue

Answer 4

Here's a dirty hack -

You have your element here (adding the disabled attribute):

<input type="text" name="test" id="test" disabled="disabled" />

And then at the bottom of your webpage put some JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

Answer 5

I really did not like making hidden fields, I think that making it like that will get really confusing really fast.

On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this

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

what this does is you first have to remove the read only attribute by selecting the field and at that time most-likely you will populated with your own user input and stooping the autofill to take over

Answer 6

Sometimes even autocomplete=off won't prevent filling in credentials into wrong fields.

A workaround is to disable browser autofill using readonly-mode and set writable on focus:

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

The focus event occurs at mouse clicks and tabbing through fields.

Update:

Mobile Safari sets cursor in the field, but does not show virtual keyboard. This new workaround 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?

filling the inputs incorrectly, for example filling the phone input with an email address

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.