autofocus
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | グローバル属性 |
autofocus属性は、要素の自動的なフォーカスを設定します。
この属性が指定された要素は、文書の読み込み時、またはダイアログが表示された時に自動的にフォーカスされます。
<input type="text" autofocus>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
autofocus |
自動的なフォーカスを設定 | （autofocus） |
値は省略可能 |
指定に関する制限について
autofocus属性が指定された要素は、直近祖先のオートフォーカス・スコーピング・ルート要素内に2つ以上あってはなりません。
- dialog要素にautofocus属性が指定されている場合は、そのdialog要素自身が直近祖先のオートフォーカス・スコーピング・ルート要素になります。
- autofocus属性を指定した要素がdialog要素内に置かれている場合は、直近祖先にあたるdialog要素が直近祖先のオートフォーカス・スコーピング・ルート要素になります。
- autofocus属性を指定した要素がdialog要素内に置かれていない場合は、html要素が直近祖先のオートフォーカス・スコーピング・ルート要素になります。
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<dialog autofocus>
ダイアログ
</dialog>
<dialog>
<p><input type="text" autofocus></p>
</dialog>
<p><input type="text" autofocus></p>
</body>
</html>
つまり、autofocus属性が指定された要素は、
- 基本的には1つの文書内で1つだけ配置できるが、
- dialog要素があればその中でも1つだけ配置できる、
ということになります。
指定できる要素
autofocus属性はグローバル属性のため、全てのHTML要素に指定することができます。
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
- 旧HTMLからの変更点
-
- HTML LS：一部の要素に定義されていたautofocus属性が、グローバル属性として再定義されました。
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<p><input type="text" autofocus></p>
</body>
</html>
- 表示例
<p><button type="button" id="openButton">モーダルダイアログを表示</button></p>
<dialog id="exDialog" style="width: 250px; height: 150px; text-align: center;">
<p><input type="text" name="example1"></p>
<p><input type="text" name="example2" autofocus></p>
<p><button type="button" id="closeButton">閉じる</button></p>
</dialog>
<script>
var openButton = document.getElementById('openButton');
var closeButton = document.getElementById('closeButton');
var exDialog = document.getElementById('exDialog');
openButton.addEventListener('click', function() {
exDialog.showModal();
// showModal() = モーダルダイアログ（周囲の領域は操作不能）
// show() = モードレスダイアログ（周囲の領域も操作可能）
});
closeButton.addEventListener('click', function() {
exDialog.close();
});
</script>
- 表示例
- autofocus属性が指定されていない場合は、ダイアログ内の最初の入力欄が自動的にフォーカスされるようです。（Chrome、Edge、Firefoxで確認）