HTMLElement: autocapitalize プロパティ
autocapitalize
は HTMLElement
インターフェイスのプロパティで、ユーザー入力に対する要素の大文字化動作を表します。すべての HTML 要素で利用可能ですが、すべての要素に影響するわけでははなく、次の要素でに影響します。
<input>
および<textarea>
要素。contenteditable
が設定された任意の要素。
autocapitalize
は物理的なキーボードで入力するときの動作には影響しません。モバイル端末の仮想キーボードや音声入力など、他の入力メカニズムの動作に影響します。例えば、各文の最初の文字を自動的に大文字にすることで、データ入力を素早く簡単にすることができます。
これは、HTML の autocapitalize
グローバル属性の値を反映します。
値
文字列で、この要素のユーザー入力に対する大文字小文字の動作を表します。有効な値は以下の通りです:
none
またはoff
-
自動大文字化を適用せず、すべての文字を既定で小文字にします。
sentences
またはon
-
各文の先頭の文字は既定で大文字にし、それ以外の文字は小文字にします。
words
-
各単語の最初の文字を既定で大文字にし、それ以外の文字を小文字にします。
characters
-
すべての文字は既定で大文字になります。
例
次の例は、スクリプトを使ってユーザー入力の大文字小文字を制御する方法を示します。
html
<div>現在の大文字化の動作は <span id="ac-label"></span> です。</div>
<div id="ac-element" contenteditable="true" autocapitalize="default">
input here
</div>
<select id="ac-controller" type="checkbox" checked>
<option value="default">既定値</option>
<option value="none">なし</option>
<option value="sentences">文</option>
<option value="words">単語</option>
<option value="characters">文字</option></select
>大文字化の動作を選択してください。
js
const label = document.getElementById("ac-label");
const element = document.getElementById("ac-element");
const controller = document.getElementById("ac-controller");
controller.addEventListener("input", (e) => {
const behavior = e.target.value;
label.textContent = behavior;
element.autocapitalize = behavior;
});
仕様書
Specification |
---|
HTML Standard # dom-autocapitalize-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML の
autocapitalize
グローバル属性