Disable Autocomplete, Autocapitalize, and Autocorrect

Written by David Walsh on December 5, 2012

Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features.  Unfortunately these features can sometimes get in the way;  we don't always want or need the help they provide.  Luckily most browsers allow the developer to remove these features in the cases they aren't desired!

The HTML

Disabling these three native mobile features is as easy as a few simple HTML attributes:

<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>

Any or all of the autocorrect, autocomplete, and autocapitalize attributes can be used on a given element to prevent the given corrective feature.

While I love these features, they aren't always applicable and when they aren't, users get frustrated.  Keep these attributes in mind when using forms on your desktop or mobile site!

Comments

  1. would you like to give me an example when they are not desired?

  2. Good blog post David. Useful to add autocorrect=”off” and spellcheck=”false” to input fields for things like product keys, post codes and things like that.

  3. Inputting code is another example. You don’t want things like ‘href’ or ‘var’ being marked as spelling errors.

  4. Disabling auto complete is something I’ll do for credit card info, etc.
    For names and such, disabling auto correction is something you might want to do.
    The only reason I see to disable auto capitalize anywhere at all is when you have a case sensitive input field. This will, in most cases at least, have to be case transformed on the backend anyways, to take care of weird user input. I can only see that disturb a user where the input can be both lower and upper cased and should not be altered by the application in any way, shape or form. This boils down to stuff like product keys, as Christian pointed out.

    Not to be negative or anything, but Chris would’ve made a list with do’s and don’ts for each feature, I guess. Chris being Chris Coyier ;-)

Be Heard

Tip: Wrap your code in <code> tags...and don't flame others.

Use Code Editor
Older
spellcheck Attribute
Newer
Vibration API