autocapitalize Text Input Sample

Available in Chrome 43+ | View on GitHub | Browse Samples

Background

Apple introduced an attribute on HTMLInputElement and HTMLTextAreaElement called autocapitalize in iOS 5. 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 it's simplest form, you could indicate that a text box should automatically capitalize the first letter of every new sentence.

Starting in Chrome 43 for Android, Chrome will support the autocapitalize attribute on both HTMLInputElement and HTMLTextAreaElement, which will allow you to control the autocapitalization behaviour of the virtual keyboard and bring it inline with Safari on iOS.

Sentence Case

Sentence case will capitalize words after a period. Like this.

Word Case

Word Case Will Capitalize Every Word. Like This.

Character Case

CHARACTER CASE IS LIKE ANGRY.

HTML Snippet

<h3>Sentence Case</h3>
<div>
  <label>What is your favorite quote?</label>
  <input type="text" autocapitalize="sentences">
  <p class="sublabel">Sentence case will capitalize words after a period. Like this.</p>
</div>

<h3>Word Case</h3>
<div>
  <label>What is your favorite quote?</label>
  <input type="text" autocapitalize="words">
  <p class="sublabel">Word Case Will Capitalize Every Word. Like This.</p>
</div>

<h3>Character Case</h3>
<div>
  <label>What is your favorite quote?</label>
  <input type="text" autocapitalize="characters">
  <p class="sublabel">CHARACTER CASE IS LIKE ANGRY.</p>
</div>