Autocapitalize for mobile
This may look like the most unimpressive feature in existence, but I think it is important because everyone dislikes typing on mobile: You hate it, I loathe it. In Chrome for Android (prior to Chrome 43 - Beta as of April 2015) a developer has little control over how the browser can help the user enter text. If you are typing on a device today, it might look like:
Notice everything is in lowercase apart from some values that Android recognized was a name.
Apple introduced an attribute on
HTMLTextAreaElement called autocapitalize in iOS 5 and it allows the page author to hint at how the browser should present the virtual keyboard for a user to optimize text entry for the user. In its simplest form, you could indicate that a text box should automatically capitalize the first letter of every new sentence.
From Chrome 43, Chrome will support the autocapitalize attribute on both
HTMLTextAreaElement, which will allow you to control the autocapitalization behavior of the virtual keyboard and bring it inline with Safari on iOS.
autocapitalize will only apply to
HTMLInputElements that have the type attribute set to:
type="password". The default is to not autocapitalize.
Here's a simple example letting you autocapitalize sentences in a text area:
What values can autocapitalize take?
The following table shows the different states that an input element can be in:
|No Capitalization||none [default]|
HTMLInputElement, the invalid value default is Sentences Capitalization if the type of the element is type=
text or type=
search. Otherwise, it is No Capitalization.
<input autocapitalize="simon">would be a text field with Sentences Capitalization
<input type="email" autocapitalize="simon">would be a text field with No Capitalization.
<input>would be a text field with No Capitalization.
HTMLTextAreaElement, the invalid value default is Sentences Capitalization. This is a change from the default behavior.
<textarea autocapitalize="terry"></textarea>would be a text area with Sentences Capitalization
<textarea></textarea>would be a text area with Sentence Capitalization.
<textarea autocapitalize="none"></textarea>would be a text area with No Capitalization.
HTMLFormElement we have decided not to implement the attribute, because we've found that it is rarely used on pages today, and when it is used, it is mostly used to disable autocapitalization on the form entirely:
The above is odd, as the default state for
HTMLInputElement is No Capitalization.
Why are you using this over
inputmode is meant to solve the same type of problem, among other things. However, it has been lacking browser implementations - to the best of our knowledge, only Firefox OS has an implementation and it is prefixed (x-inputmode) - but it also has very little usage on the web. On the other hand,
autocapitalize is used across millions of pages on hundred of thousands of websites already.
When should I use this?
This isn't an exhaustive list of when you should use
autocapitalize; however there are a number of places where helping the user enter text provides great value:
autocapitalization=wordsif you are
- Expecting people's names (note: not all names follow this rule, but the majority of western names will capitalize automatically as expected)
- Company names
autocapitalization=charactersif you are expecting:
- US states
- UK postal codes
sentencesfor input elements if you are expecting content that is entered in normal paragraph form - for example, a blog post.
noneon TextAreas if you are expecting content that should not be affected - for example, entering code.
- If you don't want hinting, don't add autocapitalize.