Disabling Auto-Correct And Auto-Capitalize Features On iPhone Inputs
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.
Want to use code from this post? Check out the license.
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.
@Dan,
What are these "shortcuts" you speak of? Is this a feature of the operating system? I've not heard of them before.
@Ben,
Shortcuts were introduced in iOS 5 I believe. You can get to them by:
Settings.app -> General -> Keyboard -> Shortcuts.
@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!
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.
I love autocorrect - for the most part.
@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.
@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.
Where did you get the nifty iPhone Simulator?
Nice info Ben. Sometimes it becomes very irritating, the feature or auto correction.
Thanks for the help. Loved that @@ idea
Also
should be mentioned as part of html5 specs
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.
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."