How to I disable form autofill in all browsers?

Question

I've looked through a number of posts all pointing towards different ways of using the autocomplete property, but I have yet to have this work in all my browsers. I've seen some really ugly workarounds such as this, but I'm looking for something that is clean and easy.

What is a good way to disable text field autofill on all (or at least, most) common browsers?

Answer 1

The following code will disable autocomplete in FF, IE, and Chrome.

<script>
    $(document).ready(function () {
    // IE & FF
    $('input').attr('autocomplete', 'off');
    // Chrome
    if ( $.browser.webkit ) {
        $('input').attr('autocomplete', 'new-password');
    }});
</script>

Answer 2

Enabling Autocomplete on both form and input fields (with the "off" value) for the sake of those law-abiding browsers that do play by the rules is always a good beginning - also for the unlikely event that one day "other" browser...s may feel like compliance isn't all bad.

Until that day hacks are needed. I've noticed that Chrome looks for matching data in at least three places: Labels (contexts), Names and Placeholders. If the Name field is missing from input fields it will look in both Labels and placeholders, but if the Name field is present it will only look in Name and Placeholder.

This script utilize the "form-control" class from Bootstrap on input fields that must be guarded from Autocomplete. Use any other class or filter you like. Also assuming that Placeholders are in use - just remove that part if not.

$(document).ready(function() {
   // Begin
   var this_obj = null, this_placeholder = null, this_name = null;
   $(".form-control").focus(function() {
      this_obj = this;
      this_name = $(this).prop("name");
      this_placeholder = $(this).attr("placeholder");
      $(this).prop("name", "NaN" + Math.random());
      $(this).attr("placeholder", "...");
   }).blur(function() {
      $(this_obj).prop("name", this_name);
      $(This_obj).attr("placeholder", this_placeholder);
   });
   // End
}); 

Note: Leaving the Placeholder empty might actually inadvertently trigger the Autocomplete function as empty assignments are apparently ignored.

The two variables this_name and this_placeholder may be avoided as they are accessible through this_obj, but I like to keep them around for the sake of readability and clarity.

The Script is erm.. quite unobtrusive, as it cleans up after itself and it only requires one matching class or attribute.

It works in Version 68.0.3440.106 (Officiel version) (64-bit), IE11 11.228.17134.0 and Firefox 61.0.2 (64-bit). Sorry, haven't tested others.

Answer 3

Add a class to all your input tags, suppose no-complete

And in your js file add following code:

setTimeout(function (){
   $('.no-complete').val ("");
},1);