【HTML】autocapitalize 属性の使い方｜スマホの自動大文字化をオン・オフする方法

スマートフォンでフォームに入力していると、文の先頭が勝手に大文字になったり、ユーザー名を入れたいのに「Yamada」と変換されたりして煩わしく感じることがあります。これはソフトウェアキーボードの自動大文字化（オートキャピタライズ）によるもので、HTML の autocapitalize 属性を使えば要素ごとに制御できます。この記事では、autocapitalize に指定できる5つの値と使い分け、フォームでの実践例、そして「PC では確認できない」「効かない入力欄がある」といった注意点までを解説します。

autocapitalize 属性とは（ソフトキーボードへの指示）

autocapitalize は、ユーザーがテキストを入力するときに、ソフトウェアキーボードが文字を自動で大文字にするかどうかを指定するグローバル属性です。多くのスマートフォンでは既定で「文の先頭を大文字にする」動作になっているため、それが不都合な入力欄で off を指定する、という使い方が中心になります。

ここで押さえておきたいのは、これが入力を強制する仕組みではないという点です。あくまでキーボード側への提案であり、ユーザーが手動で大文字・小文字を打ち直すことは自由にできます。送信された値を保証するものではないので、大文字小文字を厳密に扱いたいならサーバー側で正規化してください。また、すでに入力済みのテキストや、コピー&ペーストで貼り付けた文字列には影響しません。

指定できる5つの値

値は次の5つです。off と none、on と sentences はそれぞれ同じ意味で、前者は後者の別名という関係です。

<!-- ユーザー名：大文字にされると困る -->
<label>ユーザー名
  <input type="text" name="username" autocapitalize="off">
</label>

<!-- 氏名：単語ごとに先頭を大文字にすると入力が楽 -->
<label>お名前（英字）
  <input type="text" name="fullname" autocapitalize="words">
</label>

<!-- クーポンコード：すべて大文字 -->
<label>クーポンコード
  <input type="text" name="coupon" autocapitalize="characters">
</label>

<!-- コメント：文の先頭を大文字に（既定と同じだが明示） -->
<label>コメント
  <textarea name="comment" autocapitalize="sentences"></textarea>
</label>

日本語入力では自動大文字化そのものが働かないため、この属性は主に英数字を入力する欄で意味を持ちます。日本語のサイトでも、ユーザー名やメールアドレス、クーポンコードなど半角英数字を入れる欄は必ずあるので、そこだけでも指定しておくと入力のストレスが減ります。

継承のしかたとフォーム全体への指定

autocapitalize はグローバル属性なので、<form> や親要素に書くこともできます。<form autocapitalize="off"> と指定すると、その中の入力欄すべてに適用され、個別の入力欄で別の値を書けばそちらが優先されます。フォーム全体の既定値を決めてから、例外だけ上書きする書き方ができるということです。

<!-- フォーム全体では自動大文字化を無効に -->
<form autocapitalize="off" action="/signup" method="post">
  <label>ID
    <input type="text" name="id">
  </label>

  <label>メールアドレス
    <input type="email" name="email">
  </label>

  <!-- ここだけ上書きして単語ごとに大文字化 -->
  <label>表示名
    <input type="text" name="display" autocapitalize="words">
  </label>

  <button type="submit">登録</button>
</form>

contenteditable を付けた編集可能な領域でも同じように働きます。リッチテキストエディタを自作しているような場合は、編集領域そのものに指定してください。

関連する属性と組み合わせる

スマートフォンの入力体験を整える属性は autocapitalize だけではありません。役割が近いものをまとめて指定すると効果が高まります。

<!-- ログイン ID：大文字化も自動修正もスペルチェックも不要 -->
<label>ログイン ID
  <input
    type="text"
    name="userid"
    autocapitalize="off"
    autocorrect="off"
    spellcheck="false"
    autocomplete="username"
    enterkeyhint="next"
  >
</label>

なお autocorrect はもともと Safari 独自の属性でしたが、のちに HTML 仕様に取り込まれました。対応状況はブラウザによって差があるため、必ず効くものとしてではなく、指定しておけば環境によって効く補助的な指定と考えてください。

効いていないように見えるとき

物理キーボードでは何も起きない

この属性が働くのはソフトウェアキーボードでの入力時です。PC のブラウザで物理キーボードを使って確認しても違いは現れません。開発者ツールのスマートフォン表示（レスポンシブモード）でも、入力自体は物理キーボードなので再現しません。動作確認は実機、あるいはシミュレーターのソフトキーボードで行ってください。

type によっては最初から無効になっている

type="email"、type="url"、type="password" の入力欄では、自動大文字化はもともと働きません。これらは大文字化されると困ることが明らかなので、ブラウザ側が自動的に無効化しているためです。同様に type="number" のように文字入力を想定していない欄でも意味を持ちません。autocapitalize="off" を書いても書かなくても結果は変わらないので、指定が必要なのは type="text" や <textarea>、contenteditable の要素です。

OS やキーボードアプリの設定が優先される

ユーザーが OS の設定で自動大文字化そのものをオフにしている場合、autocapitalize="words" と書いても大文字にはなりません。サードパーティ製のキーボードアプリを使っている場合も、属性を無視することがあります。冒頭で述べたとおりこれは「提案」なので、指定どおりに入力されることを前提にした設計は避けましょう。

値のスペルが間違っている

autocapitalize="false" や autocapitalize="no" と書いても無効な値として扱われ、既定の動作に戻ります。無効にしたいときは off か none です。autocomplete と名前が似ているため取り違えやすい点にも注意してください。役割はまったく別で、autocomplete は入力候補、autocapitalize は大文字化の制御です。

まとめ

autocapitalize は、ソフトウェアキーボードによる自動大文字化を要素ごとに制御するグローバル属性です。値は off（none）・on（sentences）・words・characters の4種類で、ユーザー名や ID には off、氏名には words、クーポンコードには characters といった使い分けができます。<form> に書けば内側の入力欄すべてに適用され、個別の指定で上書きできます。autocorrect・spellcheck・inputmode・enterkeyhint とあわせて指定すると、スマートフォンでの入力体験がぐっと快適になります。ただしこれはキーボードへの提案であって入力値を強制するものではなく、type="email" や type="password" では最初から無効、PC の物理キーボードでは動作しない点に注意してください。確認は必ず実機のソフトキーボードで行いましょう。

参考ページ

• autocapitalize – HTML | MDN
• autocorrect – HTML | MDN
• inputmode – HTML | MDN