HTML DOM Input Date の autofocus プロパティの使い方を解説
HTML DOM の Input Date autofocus プロパティは、ページが最初に読み込まれる際に、日付入力フィールド（<input type="date">）へ自動的にフォーカスを当てるかどうかを設定・取得するためのプロパティです。
構文
autofocus プロパティの基本的な構文は以下の通りです。
値を取得する場合（true / false の真偽値を返す）
inputDateObject.autofocus
値を設定する場合
inputDateObject.autofocus = booleanValue
設定できるブール値
「booleanValue」には、以下のいずれかの値を指定できます。
| booleanValue | 説明 |
|---|---|
| true | ページ読み込み時に入力フィールドへ自動的にフォーカスが当てられます。 |
| false | デフォルト値。入力フィールドは自動的にフォーカスされません。 |
サンプルコード
Input Date autofocus プロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Date Autofocus</title>
</head>
<body>
日付を選択： <input type="date" id="Date" autofocus>
<button onclick="removeAutoFocus()">オートフォーカスを解除</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("Date");
divDisplay.textContent = 'Autofocus: ' + inputDate.autofocus;
function removeAutoFocus() {
if (inputDate.autofocus == true) {
inputDate.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputDate.autofocus;
}
}
</script>
</body>
</html>
実行結果
このコードを実行すると、以下のように表示されます。
「オートフォーカスを解除」ボタンをクリックする前
「オートフォーカスを解除」ボタンをクリックした後
ポイントまとめ
- autofocus プロパティは、ページ初期読み込み時のフォーカスの有無を true / false で取得・設定できます。
- デフォルト値は false であり、特に指定しない限り自動フォーカスは行われません。
- JavaScript で autofocus の値を後から変更しても、画面上のフォーカスは即座には移動しません。動的にフォーカスを制御したい場合は、focus() メソッドや blur() メソッドを併用しましょう。
-
HTML DOM Input Submit autofocusプロパティの使い方を徹底解説
HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。構文（Syntax）autofocusプロパティの構文は以下の通りです。autofocusプロパティの設定submitObject.autofocus = true|false「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォ
-
HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説
HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。構文autofocus プロパティを設定する場合の構文は以下の通りです。textObje