Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable the autofill in browser text inputs selectively via code?

Tags:

Is it possible to selectively disable the autofill feature in text fields using code?

I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.

I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.

like image 792
holiveira Avatar asked Dec 18 '09 16:12

holiveira


People also ask

How do I turn off autofill in input field?

Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form. Add autocomplete="off" for a specific <input> element of the form.

How do I restrict autofill in HTML?

Add autocomplete="off" onto <form> element; Add hidden <input> with autocomplete="false" as a first children element of the form.

How do I remove Chrome autofill code?

Sept 2020: autocomplete="chrome-off" disables Chrome autofill. Original answer, 2015: For new Chrome versions you can just put autocomplete="new-password" in your password field and that's it. I've checked it, works fine.


1 Answers

Look at the autocomplete HTML attribute (on form or input tags).

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

W3C > Autocomplete attribute

Edit:

Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.

First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.

Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.

jQuery( function()  {    $("input[autocomplete=off]").val( "" );  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form method="post" action="">    <div class="form-group">      <label for="username">Username</label>      <input type="text" id="username" name="username" value="John" autocomplete="off">    </div>    <div class="form-group">      <label for="password">Password</label>      <input type="password" id="password" name="password" value="qwerty" autocomplete="off">    </div>    <input type="submit" value="Login">  </form>
like image 140
Julien Vaslet Avatar answered Jan 06 '23 09:01

Julien Vaslet