O'Reilly

Disable Autocomplete, Autocapitalize, and Autocorrect

By on  

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

Discussion

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

    • Anything to do with names, IMO.

    • I live in Holland, work at an international software company. Most of my software (like browsers) is installed in English. But I write a lot of mail in Dutch (browser web interface). I have to be constantly alert as a lot of correctly spelled Dutch words are changed in English as I type – very annoying.

  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.

    • And David, a tip, your reply button is a bit too well hidden. I only discovered where it was (under the profile picture) after I’d already posted my comment.

  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 ;-)

  5. How about W3c validator giving errors?

  6. Instead of the W3C validator, use something like CSE HTML Validator which is more practical. There’s an online version of it too.

  7. Thanks! Unfortunately, this doesn’t work for HTC Sensation running Android 4.0.3.

  8. me

    You guys wouldn’t happen to know how to clear auto completed / keypad memory on my Micromax canvas 2 phone, short of resetting it would you?

  9. William

    I’ll give you an example.
    Im a web developer for a language services training company, and our testing services evaluate peoples ability to translate/interpret text from one language to another….
    Some people cheat by using these features, and basically let the browser take the test for them lol.

    • Jen

      I’m told that this works for most, but not for Android. Can you (or others) share what you’ve done to combat this? We have similar testing services, although not for translation.

  10. Ed

    You may also not want confidential information sent to Google for spell-checking.

  11. grovel

    Hmm, this doesn’t seem to have any effect on contenteditable-items on iOS-Safari. Any ideas how to disable this there?

  12. Natalie

    I was typing one word and page auto completed by replacing my word with another word, and it did this multiple times. This is annoying!!

  13. [email protected]

    But this doesn’t wory for contenteditable-DIV.

  14. I’m trying to add this to my mobile SEO using @media in CSS. I have many forms and each one has several input fields so I’m trying to get this done in CSS instead of adding the code to each form. I’ve tried this:

    @mobile (max-width:1020px) {
    form, input {autocomplete:off;}
    }

    But that does not work.

  15. John

    @Greg – the code is HTML not CSS that is why it doesn’t work but would be a welcome addition to CSS3. Unfortunately you will have to add it to each input or create a javascript code that does it for you.

    I used this for a Canadian postal code input which also had a masked input (from digitalbush.com – jquery.maskedinput.js) and it works well for mobile IE, Chrome and Safari. Firefox iOS is good but Firefox Android is still giving autocorrect problems. The mask limits the user to letter-number-letter-number-letter-number as they type (full regex is a bit more complicated than that). Firefox wrecks the mask by trying to autocorrect and the mask then erases the input. So, now I feel I need to use a hack to make Firefox ignore the mask as it works so well in the other browsers.

    • Thanks John! I was looking for an easy solution, I guess brute force is the only way at this point.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...