Stop Google Chrome Auto Fill The Input

Stop chrome auto filling / suggesting form fields by id

I know this isn't ideal because it changes the name of the inputs but it only does it temporarily. Changing the name attribute is the only way I found that completely removes the autocomplete.

This solution is all in JS and HTML but I think it would be better if it was implemented with a server side language such as PHP or Java.

I found autocomplete="none" works best for chrome but it doesn't fully turn off auto complete.

How it works

So, on page load this solution adds a string of random characters to each input name.

eg. 'delivery_contact_name' becomes 'delivery_contact_nameI5NTE'

When the form is submitted it calls a function (submission()) which removes the random character that were added. So the submitted form data will have the original names.

See solution below:

<html>
  <body>
    <form autocomplete="none" id="account_form" method="post" action="" onsubmit="return submission();">
     
        <div class="my-2">
          <label for="delivery_contact_name" class="">*</label>
          <input autocomplete="none" class="form-control" id="delivery_contact_name" maxlength="200" minlength="2" name="delivery_contact_name" required="" type="text" value="">
        </div>
        <div class="my-2">
          <label for="delivery_telephone" class="">Telephone*</label>
          <input autocomplete="none" class="form-control" id="delivery_telephone" maxlength="200" minlength="8" name="delivery_telephone" required="" type="tel" value="">
        </div>
        <div class="my-2">
            <label for="delivery_address_1" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_1" maxlength="50" minlength="2" name="delivery_address_1" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_2" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_2" maxlength="50" minlength="2" name="delivery_address_2" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_3" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_3" name="delivery_address_3" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_4" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_4" name="delivery_address_4" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_postcode" class="">Delivery Postcode*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_postcode" maxlength="10" minlength="6" name="delivery_address_postcode" required="" type="text" value="">
          </div>
        <input type="submit" name="submit" value="Send">
    </form>
  </body>
  <script>
    
      //generate a random string to append to the names
      const autocompleteString = btoa(Math.random().toString()).substr(10, 5);

      //get all the inputs in the form
      const inputs = document.querySelectorAll("input");

      //make sure script calls function after page load
      document.addEventListener("DOMContentLoaded", function(){
        changeInputNames();
      });

      //add random characters to input names
      function changeInputNames(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name")+autocompleteString);
          }
      }

      //remove the random characters from input names
      function changeInputNamesBack(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name").replace(autocompleteString, ''));
          }
      }
     
      
    function submission(){
      let valid = true;
      //do any additional form validation here
      if(valid){
        changeInputNamesBack();
      }
      return valid;
    }
    
  </script>
</html>

Stop Google chrome auto fill the input

Are you explicitly setting the values as blank? For example:

<input type="text" name="textfield" value="">

That should stop browsers putting data in where it shouldn't. Alternatively, you can add the autocomplete attribute to the form tag:

<form autocomplete="off" ...></form>

Programmatically disabling Chrome auto-fill

jquery.disable-autofill

Disable Chrome's autofill. Handy for CRUD forms, when you don't want username/password inputs to be autofilled by the browser.

Usage:

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

Is there a way to disable chrome autofill option for angular form fields

The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.

One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.

My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill