HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Radio の autofocus プロパティとは？使い方を解説

HTML DOM Input Radio の autofocus プロパティとは

HTML DOM の autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使用することで、ラジオボタン（type="radio"）がページの読み込み時に自動的にフォーカスを取得するかどうかを、設定または取得することができます。

構文

autofocus プロパティの構文は以下の通りです。

autofocus プロパティの設定：

radioObject.autofocus = true|false

true を指定するとラジオボタンがフォーカスを取得し、false を指定すると取得しないことを表します。既定値は false です。

サンプルコード

それでは、Input Radio の autofocus プロパティの使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio autofocus プロパティ</h1>
<form>
RADIO: <input type="radio" id="rad1" name="BTN" autofocus>
</form>
<br><br>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
function FocusVal() {
   var R = document.getElementById("rad1").autofocus;
   document.getElementById("Sample").innerHTML = "ラジオボタンのautofocusプロパティは "+R+" に設定されています";
}
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM Input Radio の autofocus プロパティとは？使い方を解説

CHECK FOCUS ボタンをクリックすると、次のように表示されます。

HTML DOM Input Radio の autofocus プロパティとは？使い方を解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、type="radio"、id="rad1"、name="BTN" を持つラジオボタンを作成し、autofocus 属性を有効（true）に設定しています。

RADIO: <input type="radio" id="rad1" name="BTN" autofocus>

次に、ユーザーがクリックした際に FocusVal() メソッドを実行する CHECK FOCUS ボタンを配置しています。

<button type="button" onclick="FocusVal()">CHECK FOCUS</button>

FocusVal() メソッドでは、getElementById() メソッドを使って該当するラジオボタンの input 要素を取得し、その autofocus プロパティの値を読み取ります。autofocus プロパティは、ラジオボタンの autofocus 属性の値に応じて true または false を返します。この値は変数 R に代入され、innerHTML プロパティを通じて id が「Sample」の段落要素内に表示されます。

function FocusVal() {
   var R = document.getElementById("rad1").autofocus;
   document.getElementById("Sample").innerHTML = "ラジオボタンのautofocusプロパティは "+R+" に設定されています";
}

まとめ

autofocus 属性は HTML5 で導入されたブール属性であり、属性を記述するだけで有効になります。JavaScript からこの DOM プロパティを参照すれば、現在フォーカス設定が有効かどうかを動的に確認したり、変更したりすることが可能です。フォームの利便性を高めたい場合にぜひ活用してみてください。

  1. HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説

    HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t

  2. HTML DOM Input radio typeプロパティの使い方を徹底解説

    HTML DOMのInput radio typeプロパティは、type=radioが設定されたinput要素（ラジオボタン）に関連付けられたプロパティです。このプロパティは、ラジオボタン型のinput要素に対して常に文字列「radio」を返します。要素の種類をプログラムから確認したい場合に便利です。構文radio typeプロパティの基本構文は以下のとおりです。radioObject.typeサンプルコードここで、radio typeプロパティの具体的な使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>