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

最新推荐文章于 2023-05-31 15:01:47 发布

梦想272

最新推荐文章于 2023-05-31 15:01:47 发布

阅读量815

点赞数

分类专栏： HTML

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

By Ben Nadel on January 5, 2012

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.