Disable autofill in Chrome 63 [duplicate]

Answer 1

I feel terrible how different browsers use different options in a same functionality.

If it's chrome, use autocomplete="disabled" which handles both autocomplete and address based autofill (two separate things):

element.autocomplete = isGoogleChrome() ? 'disabled' :  'off';

You can get some insight on how to writ isGoogleChrome() from here

JavaScript: How to find out if the user browser is Chrome?

Answer 2

Current working solution using JQuery:

Removed name and id from the input I don't want autofill on and added an identifying class. I then created a hidden input with the field name and id I want. Then on form submit I copy the value from the field with no id and no name (finding it by my identifying class), into the hidden field with the name and id.

HTML

<form id="myform">
    <input class="identifyingclass" value="">
    <input class="hidden" id="city" name="city" value="">
    <button type="submit">Submit</button>
</form>

Javascript

$('#myform').on('submit', function(e) {
     $("#city").val($('.identifyingclass').val());
});

I reckon this should work as I don't see autofill latching on to anything other than an id or name.

Answer 3

I usually do this to hide the autofill icon:

<div style="width: 0; overflow:hidden;">
    <input type="text" />
</div>

As Chrome will put the autofill icon on the first writable text field, the icon is placed on the hidden input field.

Note: Making the input field hidden-type or setting its display to 'none' doesn't seem to work.