【保存版】HTMLの`autocapitalize`属性：属性値、サンプルコード、代替方法まで完全解説

autocapitalize 属性は、HTML要素に入力されたテキストの先頭大文字化を自動的に制御するグローバル属性です。これは、特にモバイルデバイスの仮想キーボードや音声入力において、ユーザー入力を補助するために役立ちます。

属性値

autocapitalize 属性には、以下の3つの値を指定できます。

words
各単語の最初の文字のみを大文字化する
sentences
各文の最初の文字のみを大文字化する
none
自動大文字化を行わない（デフォルト値）

例

<input type="text" autocapitalize="words">

上記の例では、<input> 要素に入力されたテキストの各単語の最初の文字が自動的に大文字化されます。

一部のブラウザでは、autocapitalize 属性の動作が異なる場合があります。
<input> 要素の type 属性が url、email、または password の場合は、autocapitalize 属性が無効になります。
autocapitalize 属性は、物理キーボードからの入力には影響しません。

例1：各文の最初の文字を大文字化する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>autocapitalize 例 1</title>
</head>
<body>
  <p>名前：<input type="text" autocapitalize="sentences" name="name"></p>
  <p>住所：<input type="text" autocapitalize="sentences" name="address"></p>
</body>
</html>

この例では、name と address という2つの入力フィールドに autocapitalize="sentences" 属性を設定しています。ユーザーが入力すると、各文の最初の文字のみが自動的に大文字化されます。例えば、「田中太郎東京都渋谷区」と入力すると、「田中太郎東京都渋谷区」となります。

例2：各単語の最初の文字を大文字化する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>autocapitalize 例 2</title>
</head>
<body>
  <p>ユーザー名：<input type="text" autocapitalize="words" name="username"></p>
  <p>パスワード：<input type="password" autocapitalize="none" name="password"></p>
</body>
</html>

この例では、username という入力フィールドに autocapitalize="words" 属性を設定し、password という入力フィールドには autocapitalize="none" を設定しています。username フィールドに入力すると、各単語の最初の文字のみが自動的に大文字化されます。一方、password フィールドでは自動大文字化が無効化されているため、入力内容そのままが表示されます。

例3：自動大文字化を行わない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>autocapitalize 例 3</title>
</head>
<body>
  <p>メモ：<textarea autocapitalize="none" name="memo"></textarea></p>
</body>
</html>

この例では、<textarea> 要素に autocapitalize="none" 属性を設定しています。ユーザーが入力しても、自動大文字化は行われません。

各種ブラウザにおける autocapitalize 属性の動作互換性については、各ブラウザのドキュメントを参照することをお勧めします。
上記の例はあくまで基本的な使い方を示したものです。実際の使用場面に合わせて、適切な属性値を設定してください。

type 属性が url、email、または password の <input> 要素には無効
一部のブラウザで動作が異なる
物理キーボードからの入力には影響しない

このような制限を克服するために、autocapitalize 属性の代替方法として、以下のアプローチが考えられます。

JavaScript による制御

JavaScript を使用して、入力値の変換を独自に処理することができます。例えば、以下のようなコードで、各単語の最初の文字を大文字化することができます。

const inputElement = document.querySelector('input[name="username"]');

inputElement.addEventListener('input', () => {
  const value = inputElement.value;
  const capitalizedValue = value.replace(/\b[a-z]/g, (char) => char.toUpperCase());
  inputElement.value = capitalizedValue;
});

この方法は、より柔軟な制御が可能ですが、JavaScript の知識が必要となります。

CSS によるスタイリング

CSS を使用して、入力値の大文字化を視覚的に表現することができます。例えば、以下のようなCSSで、各単語の最初の文字を太字にすることができます。

input[name="username"] {
  text-transform: capitalize;
}

この方法は、見た目だけを変更するものであり、実際に入力値が変換されるわけではありません。

ライブラリの利用

autocapitalize 属性の代替機能を提供するライブラリもいくつか存在します。例えば、以下のようなライブラリがあります。

これらのライブラリは、より高度な機能を提供する場合がありますが、導入や設定の手間がかかります。

最適な代替方法の選択

autocapitalize 属性の代替方法は、状況によって異なります。以下の点を考慮して、最適な方法を選択してください。

メンテナンス性
将来的に変更や更新が必要になった場合の容易さ
開発者のスキル
JavaScript やライブラリの利用にどれほど精通しているか
必要な機能
単純な大文字化のみが必要なのか、より高度な変換が必要なのか