Disabling Auto-Correct And Auto-Capitalize Features On iPhone Inputs
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.