您的位置：首页 > Web前端

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

2015-09-29 10:50 537 查看

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.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航