HTML DOM Input Submit autofocusプロパティの使い方を徹底解説
HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。
構文（Syntax）
autofocusプロパティの構文は以下の通りです。
autofocusプロパティの設定
submitObject.autofocus = true|false
「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォーカスされません。デフォルト値は「false」に設定されています。
サンプルコード
それでは、Input Submit autofocusプロパティの具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<body>
<h1>Submit Autofocus プロパティ</h1>
<form action="/Sample_page.php" style="border:solid 2px green;padding:2px">
ユーザー名： <input type="text" id="USR"><br>
所在地： <input type="text" id="Loc"><br><br>
<input type="submit" id="SUBMIT1" autofocus>
</form>
<p>下のボタンをクリックすると、送信ボタンのautofocusプロパティ値を取得できます</p>
<button type="button()" onclick="FocusVal()">確認（CHECK）</button>
<p id="Sample"></p>
<script>
function FocusVal(){
var f = document.getElementById("SUBMIT1").autofocus;
document.getElementById("Sample").innerHTML = "送信ボタンのautofocusプロパティの設定値： "+f;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「確認（CHECK）」ボタンをクリックすると、以下のようにautofocusプロパティの値が出力されます。
まとめ
autofocusプロパティを使用すれば、JavaScriptから動的にフォーム内の送信ボタンが自動フォーカス対象かどうかを判定・制御できます。特に、入力フォームのユーザビリティを向上させたい場合や、ページ読み込み直後の操作手順を簡略化したい場合に便利な機能ですので、ぜひ活用してみてください。
-
HTML DOM Input Radio の autofocus プロパティとは？使い方を解説
HTML DOM Input Radio の autofocus プロパティとはHTML DOM の autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使用することで、ラジオボタン（type=radio）がページの読み込み時に自動的にフォーカスを取得するかどうかを、設定または取得することができます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティの設定：radioObject.autofocus = true|falsetrue を指定するとラジ
-
HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説
HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type=range の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。 構文（Syntax） autofocus プロパティの基本的な構文は以下のとおりです。 autofocus プロパティを設定する場合： rangeObject.autofocus = true|false tru