Miva Merchant, eCommerce, SEO, Wordpress, & general web development and consultation.
Website Tips & Tricks

Sometimes you need to turn off autocomplete in forms for a good user experience.


If you have a web app with forms that come up on a regular basis, for example if you're entering blog posts, you don't want the inputs to have auto-complete turned on because it is annoying.

by

Autocomplete is useful to the point that I don't know where I'd be if I couldn't enter my entire identity into a web form in one click. I start typing "Sco" and everything from my birth date to mother's maiden name is ready to automatically populate a form.

This is great until you have a web app that asks people to fill in the same form many times, for example in a forum or blog system. Having auto-complete turned on makes it an eyesore when ten past titles show up as possible entries.

Turning auto-complete off is easy and anyone can do it.

When you have an input field, add autocomplete="off" to it, like this:

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

You can also disable autocomplete for an entire form by turning it off at the top form level like this:

<form autocomplete="off" action="...">

There is no straight up CSS method of turning autocomplete off so this is the next best thing.

As a side note, you can also turn off auto-correct and auto-capitalization like this:

<input type="text" name="some_name" autocorrect="off"></input><br>

<input type="text" name="some_name" autocapitalize="off"></input>

Autocomplete="false"

Some people have said that autocomplete="off" doesn't work for them but that autocomplete="false" does. Try this if you fall into that category:

<input name="q" type="text" autocomplete="false">

Advanced Method 1: Random IDs

This method sort of uses CSS to turn autocomplete off and it requires you to programatically have a unique/random ID for each of your form fields.

<input id="xyxyx" name="q" type="text">
<input id="ababa" name="q" type="text">

Advanced Method 2: Javascript

Some will say that using autocomplete="off" isn't valid HTML and in a strict sense they are correct. To get around this you can put some javascript at the foot of your document:

if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}
}
}

Another javascript method that uses jQuery (I like this method because of how clean and obvious it is). This will disable autocomplete for any input field on the page:

<script>
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
</script>

Another more global jQuery method that will disable autocomplete for any form on the page:

<script>
$('form').attr('autocomplete','off');
</script>

Example of this one in use:

<body>
<form action="somefile.mvc">
<input type="text" name="username">
<button type="submit">Submit Me!</button>
</form>
<script>
$('form').attr('autocomplete','off');
</script>
</body>

Important Note:

If you copy/paste from these examples it's possible that you'll get some invisible HTML chars that cause errors, just be on the lookout if you see something strange in the page inspector or it doesn't work. I tried the code above, it works for me in the latest version of Chrome.

(0/5, vote) my rating:
overall rating:

Please log in to leave a comment.

The blog posts on Scot's Scripts are served by Scot's Blogger, a Miva Merchant blogging module that makes it easy to create a Wordpress style blog, rich content, and extra pages in your Miva Merchant store.