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

これまでは目立たない機能のように思えるかもしれませんが、誰もがモバイルでの入力を嫌っているため、重要なものだと思います。Chrome for Android(Chrome 43 より前 - 2015 年 4 月時点のベータ版)では、ユーザーによるテキスト入力をサポートするブラウザについて、デベロッパーが制御することはほとんどできません。今日、デバイスで入力する場合、次のようになります。

Android が名前として認識する値を除き、すべてが小文字になっていることに注意してください。

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

Chrome 43 以降では、HTMLInputElementHTMLTextAreaElement の両方で 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 の場合、無効な値のデフォルト値は「文の大文字化」です。これはデフォルトの動作からの変更です。

  • <textarea autocapitalize="terry"></textarea> は、文の大文字化を使用したテキスト領域です。
  • <textarea></textarea> は、文の大文字化を使用したテキスト領域です。
  • <textarea autocapitalize="none"></textarea> は、No Capitalization のテキスト領域です。

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

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

HTMLInputElement のデフォルト状態が [No Capitalization] であるため、上記は奇妙です。

これを inputmode ではなく使用する理由は何ですか?

inputmode は、特に同じタイプの問題を解決するためのものです。しかし、ブラウザの実装に関して不足している点があります(知る限りでは、Firefox OS にのみ実装があり、接頭辞 (x-inputmode) が付いています)。また、ウェブでの使用もほとんどありません。一方、autocapitalize はすでに何十万ものウェブサイトの何百万ものページで使用されています。

使用する必要がある場合

以下は、autocapitalize を使用すべき状況を網羅したリストではありません。ただし、次のような場合に、ユーザーがテキストを入力できるようにすると便利です。

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