disable autocomplete / autofill for an input field

Question

I have this input field which shows me a list of google address suggestions:

<input type="text" id="customerAddress" name="customerAddress" placeholder="Adresse (Vorschlag übernehmen)" autocomplete="off">

I would like to prevent the autocomplete / autofill function of any browser. For this I tried "autocomplete=off", but it doesn't work. The autofill wasn't disabled:

What can I do ?

Answer 1

For anyone who tried autocomplete = "off" and didn't worked you can try these simple solutions:

1. Keeping autocomplete="off webauthn" actually worked for me in Angular Material Input fields. Like this in input field you can add.

<input matInput formControlName="email" placeholder="Email ID" autocomplete="off webauthn" (input)="checkEmailAvailability()">

2. You can try combination of other autocomplete attributes like autocomplete="nope" or autocorrect="off" autocapitalize="off" autocomplete="off" or autocomplete="anyRandomString" or autoComplete="off" (For react).

3. There is also an alternative CSS workaround solution. You can read this article here how to resolve it. It will basically mask the password field.

4. For people using angular if none of the solution work then they can try by creating a directive like this and then disabling the autofill and auto complete of input field.

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[disableAutocomplete]'
})
export class DisableAutocompleteDirective {
  constructor(private elementRef: ElementRef) {
    this.disableAutocomplete();
  }

  private disableAutocomplete() {
    const element = this.elementRef.nativeElement;
    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
      element.setAttribute('autocomplete', 'off');
    }
  }
}

<form>
  <input type="text" name="username" disableAutocomplete>
  <input type="password" name="password" disableAutocomplete>
</form>

5. If you are using jQuery or JS then you can try this solution it will also work but try this if all other above won't work.

<form autocomplete="off">
    ...
    <input type="password" readonly autocomplete="new-password" id="Password" name="Password" />
    ...
</form> 

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var passwordInput = document.getElementById('Password');
        passwordInput.value = '';
        
        passwordInput.addEventListener('focus', function () {
            if (!passwordInput.value || passwordInput.value.length < 2) {
                passwordInput.type = 'text';
            } else {
                passwordInput.type = 'password';
            }
        });
        
        passwordInput.addEventListener('keyup', function () {
            if (!passwordInput.value || passwordInput.value.length < 2) {
                passwordInput.type = 'text';
            } else {
                passwordInput.type = 'password';
            }
        });
        
        passwordInput.addEventListener('keydown', function () {
            if (!passwordInput.value || passwordInput.value.length < 2) {
                passwordInput.type = 'text';
            } else {
                passwordInput.type = 'password';
            }
        });
    });
</script>

It ensures that the password field starts as a text input with no value displayed. When the field gains focus, it checks if it's empty or has less than 2 characters. If so, it displays the text input to show the user's input; otherwise, it displays the password input to obscure the characters.

Answer 2

You will find an explanation here (after the code blocks).

You can either try to change the name attribute of your fields or set the autocomplete attribute to "off" on the form tag instead.