HTML DOMチェックボックスのautofocusプロパティとは？使い方をサンプルコード付きで解説
HTML DOMのInput Checkbox autofocusプロパティは、type="checkbox"が指定されたinput要素におけるautofocus属性の値を取得（返却）および変更するために使用されます。autofocus属性を設定しておくと、ページが読み込まれた時点で該当するチェックボックスへ自動的にフォーカスが移ります。
構文
autofocusプロパティの基本的な構文は以下の通りです。
1. autofocusの値を取得する
object.autofocus
2. autofocusの値を設定（変更）する
object.autofocus = true|false
サンプルコード
それでは、autofocusプロパティを使った具体的な例を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM autofocusプロパティ</title>
<style>
body{
text-align:center;
}
p{
font-size:1.5rem;
color:#ff8741;
}
input{
width:30px;
height:30px;
outline:2px solid #db133a;
}
button{
background-color:#db133a;
color:#fff;
padding:8px;
border:none;
width:120px;
margin:0.5rem;
border-radius:50px;
outline:none;
}
</style>
</head>
<body>
<h1>autofocusプロパティの例</h1>
<p>ヘルプが必要ですか？</p>
<input type="checkbox" autofocus>
<br>
<button onclick="yes()">はい</button>
<button onclick="no()">いいえ</button>
<script>
function yes() {
document.querySelector("input").checked = true;
}
function no() {
document.querySelector("input").checked = false;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のように表示されます。
「はい」「いいえ」ボタンをクリックすることで、チェックボックスのオン／オフを切り替えることができます。さらに注目していただきたいのは、ページ読み込みの時点でチェックボックスに自動的にフォーカスが当たり、赤い枠線が表示されているという点です。これがautofocus属性の効果です。
まとめ
- autofocusプロパティはブール型（true / false）の値を扱います。
- HTML側では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