Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2011 (Minneapolis, MN) with:

Disabling Auto-Correct And Auto-Capitalize Features On iPhone Inputs

By Ben Nadel on
Tags: HTML / CSS

Over the weekend, I read Mobile First by Luke Wroblewski. In his book, Wroblewski mentioned that in order to create the most usable experience on a mobile device, one should probably turn off the auto-correction and auto-capitalization features for input fields that don't require them. This way, users don't have to worry about their email addresses being capitalized or their names being "corrected." I really loved this idea; but, Wroblewski didn't get into any code. After a bit of Googling, however, I found that both of these auto-input features could be disabled with a simple HTML attribute.


 
 
 

 
  
 
 
 

Googling quick brought me to Apple's "How-To" guide for coding Safari for iPhone. In it, there was a section that perfectly answered my question: "How do I disable automatic correction and automatic capitalization in text fields or text areas?" As it turns out, auto-correction and auto-capitalization can be disabled with one HTML attribute (each):

  • autocorrect="off"
  • autocapitalize="off"

That seems simple enough. To experiment with this, I put together a quick demo and opened it up in my iPhone Simulator (which you can see in action in the above video):

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>Disable Auto-Correct And Auto-Capitalization On iPhone</title>
  •  
  • <!---
  • Use the device width as the initial width of the
  • viewport. This way, we will have a zoom that is relevant
  • to our mobile app.
  • --->
  • <meta name="viewport" content="width = device-width" />
  • </head>
  • <body>
  •  
  • <h1 style="font-size: 16px ;">
  • Disable Input Field Auto-<br />
  • Features on iPhone
  • </h1>
  •  
  • <form>
  •  
  • <p>
  • Normal Input:<br />
  • <input type="text" style="width: 180px ;" />
  • </p>
  •  
  • <!--
  • On this in put, we will add the two "auto" attributes
  • to turn off auto-correct and auto-capitalization.
  • -->
  • <p>
  • No-Auto Input:<br />
  • <input
  • type="text"
  • autocapitalize="off"
  • autocorrect="off"
  • style="width: 180px ;"
  • />
  • </p>
  •  
  • </form>
  •  
  • </body>
  • </html>

That's all there is to it! These features, combined with using the right input type to trigger the right keyboard, should help keep the mobile experience as usable as the desktop experience.




Reader Comments

I was curious if the autocorrect would also disable keyboard shortcuts in iOS5 and it does *not*.

This is nice because I've set up a shortcut of @@ to insert my e-mail address.

This means user defined shortcuts still work, it only affects spelling corrections.

Now if I could just figure out how to insert a keyboard shortcut in iOS w/out inserting an extra character (like a space or punctuation.) I always think I can click the entry to add it, but it never works.

Reply to this Comment

@Dan,

What are these "shortcuts" you speak of? Is this a feature of the operating system? I've not heard of them before.

Reply to this Comment

@Ben,

Shortcuts were introduced in iOS 5 I believe. You can get to them by:
Settings.app -> General -> Keyboard -> Shortcuts.

Reply to this Comment

@Devin,

Awesome sauce!! This looks like it could definitely be helpful :D I'll put my thinking cap on, see what kind of repetition I use in my life. Thanks!

Reply to this Comment

Cool, even though I don't have an iPhone. I have a droid. Sometimes I wish I could turn the autocorrect feature off of the swype function, but I guess that whole function more or less depends upon an autocorrect-like functioning. Blah. Other than that, the swype function is nifty if you are driving and texting, and also the talk-to-text feature as well. And for the record, I don't like texting and driving as a habit, but every now and then, someone will text me while I am driving, and it may be a really long interstate road, and I may not want to pull off an exit to simply say "yes" to someone's question. But I would probably never text and drive if I didn't have swype or talk-to-text. That would definitely make it way too dangerous. Swype and talk-to-text makes it much easier. I know New Yorkers don't really have to worry about that as much. It does seem to save a lot of time, also. A friend and I were comparing our droid and iPhone, and there were things like the talk-to-text and swype that I really liked about my droid, and he said the iPhone did not have it.

Yeah, about those keyboard shortcuts...I have accidentally hit them before, and it nearly killed me to get the screen back to "normal". Or when you accidentally hit a keyboard shortcut and it makes your taskbar go all heywire, or blows up your screen and takes away your navigational tools. lol. I guess I have clumsy fingers.

Reply to this Comment

@Ben,

I hate that bad-guessing autocorrect so much, I disable it on all my iDevices. But it STILL sometimes highlights a word [in pink] to suggest an alternative from time to time. If I don't notice it instantly, before I type the very next character, it throws away everything it highlighted.

That misbehavior is a deficiency in its own right, but it caused me to notice another deficiency: You know what iOS needs? Undo.

Not to undo what YOU'VE done. To undo what IT'S done, incorrectly, on your behalf.

Reply to this Comment

@WebManWalking,

Agreed. AutoCorrect is still on on my Android, but I turned it off when I had my iPhone3G. Annoying.

But thanks for the @@ shortcut idea. Will turn that on the iPad for sure.

Reply to this Comment

Nice info Ben. Sometimes it becomes very irritating, the feature or auto correction.
Thanks for the help. Loved that @@ idea

Reply to this Comment

Good day! I just want to give you a huge thumbs up for the great info you have here on this post.

I'll be returning to your web site for more soon.

Reply to this Comment

can you give an example how to do this with javascript or other means since W3 validator gives errors:

"Attribute autocapitalize not allowed on element input at this point."

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.