Site icon MoreOnFew

How to disable autocomplete in HTML?

HTML5 MoreOnFew

HTML5 MoreOnFew

The autocomplete feature has been of a great help as a website visitor especially if you have a long form that you might fill more than once. The autocomplete feature of HTML is basically used to fetch previous input values from the input field. However, not every time do you require autocomplete. Consider an input that requires some kind of sensitive data like password, credit card numbers etc. In such cases you might ideally want the autocomplete to be turned off. Through HTML you can easily turn off the autocomplete.

To disable autocomplete or to disable autofill in HTML you need to set the autocomplete attribute of input elements to off. You should add it as an attribute on the input element. So your code now should look similar to the following :

<input type="text" name="firstname" autocomplete="off" >

How to disable or turn off autocomplete in jQuery ?

You can turn off the autocomplete feature even through jQuery. Basically the concept remains the same as that of HTML. However, instead of you manually adding autocomplete="off" to each and every input field, you can use jQuery to do it for you. All you need to do is to target the element using jQuery selector and add the autocomplete attribute and its value. So you can turn off the autocomplete in jQuery through the following code :

$('input').attr('autocomplete','off');

Or you can also target all the input elements with autocomplete attribute in it and turn it off using the following :

$('input[autocomplete]').attr('autocomplete','off');

However, please remember that the autocomplete attribute would turn off the suggestions from the previous input values alone. If you have a autocomplete plugin or your browser has an explicit autocomplete feature (like chrome’s inbuilt autocomplete), then not necessarily the autocomplete attribute might be considered and hence you might not be able to turn the autocomplete off using the attribute.

Also sometimes you need to disable autocomplete in html form by setting the autocomplete="off" attribute on <form> element like <form autocomplete="off" > . This helps to get rid of certain plugin or browser based autocomplete features like the one in Chrome browser.

Happy Coding ! Let us know if it worked for you.