Disable autofill on a web form through HTML or JavaScript?

Question

Is there a way to disable autofill in Chrome and other browsers on form fields through HTML or JavaScript? I don't want the browser automatically filling in answers on the forms from previous users of the browser.

I know I can clear the cache, but I can't rely on repeatedly clearing the cache.

Answer 1

You can do it at the input level in HTML by adding autocomplete="off" to the input.

http://css-tricks.com/snippets/html/autocomplete-off/

You could also do it via JS such as:

someForm.setAttribute( "autocomplete", "off" ); 
someFormElm.setAttribute( "autocomplete", "off" );

Answer 2

In fact autocomplete off doesn't always work in newer browsers. E.g in Chrome it is ignored if the autofill property is set. See the link: http://caniuse.com/#feat=input-autocomplete-onoff

Answer 3

jQuery one:

$(".indication-checkbox").attr("autocomplete", "off");

Answer 4

I had the same issue. Wanted to stick to a HTML solution (I dont like dirty JS workarounds). The only thing that worked for me is when I changed ID and/or name of the input to something that is not a usual keyword.

Read Talinon's answer from this Laracast thread:

I once had this problem on a text field. No matter what I did, Chrome insisted on auto filling/completing. I eventually discovered changing the id/name of the element solved the problem. It's like Chrome has some hard-coded keywords it looks for and is bent on autofilling them. If the problem persists with the proposed hacks, try changing the id/name to something that doesn't contain "title" or "address", etc.

Long story short:

<form>
    <input type="email" name="fem" />
    <input type="password" name="fpass" autocomplete="new-password" />
</form>

Longer story (explanation why this works): Disabling autocomplete on form inputs with HTML

Answer 5

I am working with onfocus and onblur, like this:

<form>
  <p>Type something in both fields and hit submit button, then refresh this page and click on the first field. In chrome, you will get autocomplete on the first field, but if you select it it will populate only that first field!</p>
  <input type="text" name="first" placeholder="with autocomplete" /> <br/>
  <input type="text" name="second" placeholder="without autocomplete"
  readonly="readonly" 
  onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}"
  onblur="if (!this.hasAttribute('readonly')) {this.setAttribute('readonly','readonly')};"
  /><br/>
  <button type="submit">Send</button>
</form>

Answer 6

You can use this code:

$(".TextID").attr("autocomplete", "off"); //disable input level