Disable Autocomplete, Autocapitalize, and Autocorrect

Discussion

1. Monika T-S

   would you like to give me an example when they are not desired?
• David Walsh

  Anything to do with names, IMO.
• Jan K.

  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.
• mark

  Obviously it is a requirement. Why else would someone ask?
• rAthus

  I just found this article looking for that tip, I’m using a custom 4-letters captcha on my mobile website and I let you imagine how annoying it can be whe the keyboard autocorrects “hdlp” into “help” just as you’re submitting the form! ;)
• Kumar McMillan

  An input field for entering an alpha-numeric code that is case sensitive
2. christian

   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. Charles @ CodeConquest.com

   Inputting code is another example. You don’t want things like ‘href’ or ‘var’ being marked as spelling errors.
• Charles @ CodeConquest.com

  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. Jan-Marten de Boer

   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. Lechus

   How about W3c validator giving errors?
6. Albert Wiersch

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

   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. gtzf@gmx.com

    But this doesn’t wory for contenteditable-DIV.
14. Greg

    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.
• Greg

  Thanks John! I was looking for an easy solution, I guess brute force is the only way at this point.
16. Christian Scholz-Flöter

    Adding those four attributes to input fields or to the parent form tag does not have the expected result when the page is viewed in Chrome 52.0.2743.98 on my LG G2 (Android 4.4.2).
    Chrome still happily spams the screen with several autocompletion options.
    The standard internet browser on the LG seems to behave, though.
17. Tomáš Kout

    UPDATE: since iOS5 the autocapitalize="off" is deprecated in favor of none. See MDN for more info.
18. Angel Grablev

    I’ve created a polyfill for autocapitalize to work in all browsers:

    https://github.com/agrublev/autocapitalize
19. james

    Does not work at all for me on Android Samsung Galaxy. It still brings up the autocomplete keyboard, even in your example
20. sean

    There are very few things that are more annoying to me then when people answer a straightforward technical query with things like “Well, you shouldn’t do that anyways” or “Can you tell me why this would be useful?”. It is the height of arrogance to assume that there is never any valid reason to do something just because you personally have never come across a valid use case for said activity. Sorry for ranting, but it really does drive me nuts.
21. Raphael

    Two things:

    1) autocomplete has nothing to do with the keyboard; it’s about filling in what the browser remembered from earlier.

    2) autocorrect _has_ to do with the (virtual) keyboard, but it’s non-standard and definitely not supported in all browsers.
22. Jasie

    I just want to add to Raphael’s comment:

    autocorrect in not an allowed attribute and causes this HTML validation error:
    “Attribute autocorrect not allowed on element input at this point.”

    If you propose solutions, David, I think you should mention restrictions.