Primal Skill - Dream. Design. Execute.

Turn Autocomplete Off For HTML Input Tags

It’s very annoying when the autocompletion is on in your browser and you develop a website where you have to sign up a user. Of course on that form there are different text fields, username field, password field. And it is very very annoying that the autocomplete ’stuff’ fills these textboxes with your sensitive data.

From a web developers point of view it’s good practice to clear all the text boxes when the form is shown. BUT (there’s always have to be a but) of course when we want to do this we face with browser incompatibilities (again!). Let’s see IE and Safari support autocomplete=”off” attribute in html input and form tags, but not Firefox. This is a proprietary attribute, so it fails in standard’s validation.

It seems that Firefox is the black sheep in this case, because it always runs this auto complete after the whole page was rendered. So it’s useless to set a html input’s value to nothing. (value=”")

One solution to this problem is with Javascript. The idea is to load a Javascript function which sets a specified input’s value to null after the whole page was rendered. The code below does this thing. You have to set the tag’s id and it will do the rest.

var genericAutocomplete = {

off : function(srcInputID) {

var tag = document.getElementById(srcInputID)

if (tag) {

tag.value = '';

}

} //end of turnOff

} //end of genericAutocomplete

To load this after the page is rendered we call the setTimeout function like this:

window.setTimeout("genericAutocomplete.off('input_id')",50);

We have to use setTimeout to load this function after the page is fully rendered by Firefox. Loading in the window’s onload event just doesn’t work.

And as a bonus our pages now validates too.

If you enjoyed this article then help spread the word and please follow us on Twitter or subscribe to our RSS feed.