HTML DOM Input Datetimeのautofocusプロパティとは？使い方を解説
HTML DOMのInput Datetimeオブジェクトにおけるautofocusプロパティは、ページが最初に読み込まれた際に、日時入力フィールド（Input Datetime）へ自動的にフォーカスが当たるかどうかを設定・取得するためのプロパティです。
構文
autofocusプロパティの基本的な構文は以下の通りです。
値を取得する場合（ブール値 true / false を返す）
inputDatetimeObject.autofocus
値を設定する場合（booleanValueにブール値を指定）
inputDatetimeObject.autofocus = booleanValue
ブール値の種類
「booleanValue」には以下のいずれかの値を指定できます。
| booleanValue | 説明 |
|---|---|
| true | ページ読み込み時に、その入力フィールドへ自動的にフォーカスが当たることを意味します。 |
| false | デフォルト値です。ページ読み込み時にフォーカスは当たりません。 |
サンプルコード
ここで、Input Datetimeのautofocusプロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Autofocus</title>
</head>
<body>
Date & Time: <input type="datetime" id="Datetime" value="1998-04-09T12:48IST" autofocus>
<button onclick="removeAutoFocus()">Remove Auto Focus</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetime = document.getElementById("Datetime");
divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
function removeAutoFocus() {
if(inputDatetime.autofocus == true){
inputDatetime.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
}
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
「Remove Auto Focus」ボタンをクリックする前：
ページ読み込み時にautofocus属性が設定されているため、日時入力フィールドに自動的にフォーカスが当たり、画面には「Autofocus: true」と表示されます。
「Remove Auto Focus」ボタンをクリックした後：
ボタンをクリックするとremoveAutoFocus()関数が実行され、autofocusプロパティがfalseに変更されます。画面の表示も「Autofocus: false」に切り替わります。
まとめ
autofocusプロパティを活用することで、JavaScriptから動的にフォーム要素の初期フォーカス状態を制御できます。ユーザーがすぐに入力を始められるようにしたい場面や、逆に意図しないフォーカスを解除したい場面などで役立つ便利なプロパティです。
-
HTML DOM 入力テキストの autofocus プロパティとは？使い方をサンプルコード付きで解説
HTML DOM の input Text autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性と関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に入力テキストフィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。例えば、ログインフォームや検索ボックスなど、ユーザーにすぐに入力してほしい場面で活用すると、マウス操作なしでキーボード入力を開始できるため、ユーザビリティの向上につながります。構文autofocus プロパティを設定する場合の構文は以下の通りです。textObje
-
HTML DOM Input Radio の autofocus プロパティとは？使い方を解説
HTML DOM Input Radio の autofocus プロパティとはHTML DOM の autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使用することで、ラジオボタン（type=radio）がページの読み込み時に自動的にフォーカスを取得するかどうかを、設定または取得することができます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティの設定：radioObject.autofocus = true|falsetrue を指定するとラジ