モバイル用の自動大文字表記

Paul Kinlan

あまり目立たない機能のように思えますが、モバイルでの入力は誰もが嫌がるものなので、重要だと思います。私も嫌いです。Android 版 Chrome（2015 年 4 月時点での Chrome 43 以前のベータ版）では、デベロッパーはブラウザがユーザーのテキスト入力をサポートする方法についてほとんど制御できません。デバイスで入力すると、次のように表示されます。

Android が名前と認識した一部の値を除き、すべて小文字になっています。

Apple は iOS 5 で HTMLInputElement と HTMLTextAreaElement に autocapitalize という属性を導入しました。これにより、ページ作成者は、ユーザーがテキスト入力を最適化できるように、ブラウザが仮想キーボードをどのように表示すべきかをヒントとして指定できます。最もシンプルな形では、テキスト ボックスで新しい文の最初の文字を自動的に大文字にすることを指定できます。

Chrome 43 以降では、HTMLInputElement と HTMLTextAreaElement の両方で autocapitalize 属性がサポートされるため、仮想キーボードの自動大文字入力の動作を制御し、iOS 版 Safari と連携させることができます。

autocapitalize は、type 属性が type="text"、type="search"、type="url"、type="tel"、type="email"、type="password" に設定されている HTMLInputElement にのみ適用されます。デフォルトでは、自動大文字化は行われません。

テキスト エリア内の文を自動的に大文字にする簡単な例を次に示します。

<textarea autocapitalize="sentences">

自動大文字入力で使用できる値

次の表に、入力要素がとるさまざまな状態を示します。

州 キーワード
<input>
<input autocapitalize=off> 		大文字と小文字の区別なし なし [デフォルト]
オフ
<input autocapitalize=characters> 文字の大文字小文字 文字
<input autocapitalize=words> 単語の大文字 / 小文字 words
<input autocapitalize=sentences> 文の大文字小文字 sentences

HTMLInputElement の場合、要素のタイプが type=text または type=search の場合、無効な値のデフォルトは Sentences Capitalization です。それ以外の場合は、No Capitalization です。

  • <input autocapitalize="simon"> は、文の大文字と小文字が設定されたテキスト フィールドです。
  • <input type="email" autocapitalize="simon"> は、[大文字なし] のテキスト フィールドです。
  • <input> は、[大文字なし] のテキスト フィールドです。

HTMLTextAreaElement の場合、無効な値のデフォルトは「Sentences Capitalization」です。これはデフォルトの動作から変更されています。

  • <textarea autocapitalize="terry"></textarea> は、文の大文字 / 小文字が設定されたテキスト領域です。
  • <textarea></textarea> は、文頭の 1 文字を大文字にする（アルファベットの場合）のテキスト領域です。
  • <textarea autocapitalize="none"></textarea> は、大文字なしのテキスト領域です。

HTMLFormElement については、この属性は現在ページでほとんど使用されておらず、使用されている場合でも、ほとんどはフォームでの大文字入力の自動化を完全に無効にするために使用されているため、この属性を実装しないことにしました。

<form autocapitalize=off><input></form>

HTMLInputElement のデフォルト状態は「大文字なし」であるため、上記は奇妙です。

inputmode ではなくこれを使用している理由

inputmode は、同じタイプの問題を解決することを目的としています。ただし、ブラウザの実装が不足しています。現在のところ、Firefox OS のみが実装しており、接頭辞（x-inputmode）が付いていますが、ウェブでの使用はほとんどありません。一方、autocapitalize はすでに数十万のウェブサイトの何百万ものページで使用されています。

使用する必要がある場合

これは autocapitalize を使用するべき状況を網羅したものではありませんが、ユーザーがテキストを入力する際に役立つ場所はいくつかあります。

    • autocapitalization=words
    • 人名を想定（注: すべての名前がこのルールに従うわけではありませんが、西洋の名前の大部分は想定どおりに自動的に大文字になります）
    • 会社名
    • 住所
  • 次の場合、autocapitalization=characters を使用します。
    • 米国の州
    • 英国の郵便番号
  • 通常の段落形式で入力されるコンテンツ（ブログ投稿など）を想定している場合は、入力要素に sentences を使用します。
  • コードの入力など、影響を受けないコンテンツが入力されることが予想される場合は、TextArea で none を使用します。
  • ヒントを表示しない場合は、自動大文字入力を追加しないでください。