HTML autocapitalize グローバル属性
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
autocapitalize グローバル属性は列挙型の属性で、ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうか、どのように行われるかを制御します。これは次のものに関連します。
<input>および<textarea>要素contenteditableが設定されたあらゆる要素。
autocapitalize は、物理キーボードで入力する場合の動作には影響しません。モバイル端末の仮想キーボードや音声入力など、その他の入力メカニズムの動作に影響します。これにより、例えば各文の最初の文字を自動的に大文字にするなど、データ入力がより迅速かつ容易になり、ユーザーを支援することができます。
値
取りうる値は次の通りです。
noneまたはoff-
自動的な大文字化は適用されません。
sentencesまたはon-
各文の最初の文字を既定で大文字にします。
words-
各語の最初の文字を既定で大文字にします。
characters-
すべての文字が既定で大文字になります。
使用上のメモ
autocapitalizeは、<input>と<textarea>要素、およびそれらを含む<form>要素に設定できます。autocapitalizeが<form>要素に設定されている場合、その要素に含まれるすべての<input>および<textarea>要素の自動大文字化動作が設定され、含まれている要素に設定されているautocapitalizeの値は上書きされます。autocapitalizeは、自動大文字化が決して有効にならないurl、email、password<input>型には効果はありません。autocapitalizeが指定されていない場合、採用される既定の動作はブラウザーによって異なります。例を示します。- Chrome および Safari の既定値は
on/sentencesです。 - Firefox の既定値は
off/noneです。
- Chrome および Safari の既定値は
例
HTML
html
<p>さまざまな自動大文字化設定を検査するためのフォーム</p>
<form>
<div>
<label for="default">既定: 自動大文字化の設定なし</label>
<input type="text" id="default" name="default" />
</div>
<div>
<label for="off">autocapitalize="off"</label>
<input type="text" id="off" name="off" autocapitalize="off" />
</div>
<div>
<label for="none">autocapitalize="none"</label>
<input type="text" id="none" name="none" autocapitalize="none" />
</div>
<div>
<label for="on">autocapitalize="on"</label>
<input type="text" id="on" name="on" autocapitalize="on" />
</div>
<div>
<label for="sentences">autocapitalize="sentences"</label>
<input
type="text"
id="sentences"
name="sentences"
autocapitalize="sentences" />
</div>
<div>
<label for="words">autocapitalize="words"</label>
<input type="text" id="words" name="words" autocapitalize="words" />
</div>
<div>
<label for="characters">autocapitalize="characters"</label>
<input
type="text"
id="characters"
name="characters"
autocapitalize="characters" />
</div>
<div>
<label for="characters-ta">autocapitalize="characters" on textarea</label>
<textarea
type="text"
id="characters-ta"
name="characters-ta"
autocapitalize="characters">
</textarea>
</div>
</form>
<hr />
<p contenteditable autocapitalize="characters">
このコンテンツは編集可能であり、 autocapitalize="characters" が設定されています。
</p>
結果
仮想キーボードまたは音声入力を使用して、各入力に対する効果を検査してください（キーボード入力は動作しません）。
仕様書
| Specification |
|---|
| HTML # attr-autocapitalize |
ブラウザーの互換性
Loading…