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

HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

HTML DOM の input range autofocus プロパティは、HTML の <input> 要素が持つ autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際にレンジスライダー（type="range" の入力欄）へ自動的にフォーカスを当てるかどうかを、設定（set）および取得（get）することができます。

構文（Syntax）

autofocus プロパティの基本的な構文は以下のとおりです。

autofocus プロパティを設定する場合：

rangeObject.autofocus = true|false

true を指定するとレンジスライダーがフォーカスを取得し、false を指定するとフォーカスしません。このプロパティの初期値は false です。

サンプルコード（Example）

ここで、input range の autofocus プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input range autofocus property</h1>
<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type="button" onclick="rangeFocus()">CHECK</button>
<p id="Sample"></p>
<script>
    function rangeFocus() {
        var R = document.getElementById("RANGE1").autofocus;
        document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
    }
</script>
</body>
</html>

実行結果（Output）

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

CHECK ボタンをクリックした後：

HTML DOM 入力レンジ（range）の autofocus プロパティの使い方を徹底解説

コードの解説

このサンプルコードの動作を順番に見ていきましょう。

1. autofocus 属性付きのレンジ入力欄を作成

まず、フォームの中に type="range"、id="RANGE1"、name="VOL" を持つ入力フィールドを作成し、autofocus 属性を付与することで自動フォーカスを有効（true）にしています。

<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>

2. CHECK ボタンの設置

次に、ユーザーがクリックすると rangeFocus() メソッドを実行する「CHECK」ボタンを作成します。

<button type="button" onclick="rangeFocus()">CHECK</button>

3. rangeFocus() メソッドの処理内容

rangeFocus() メソッドでは、getElementById() メソッドを使って type が range の入力要素を取得し、その autofocus プロパティの値を参照します。autofocus プロパティは、レンジスライダーの autofocus 属性の値に応じて true または false を返します。

取得した値は変数 R に代入され、innerHTML プロパティを通じて id が「Sample」の段落要素内に結果として表示されます。

function rangeFocus() {
    var R = document.getElementById("RANGE1").autofocus;
    document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}

まとめ

autofocus プロパティを活用すれば、ページ表示時にユーザーの操作を最小限に抑え、レンジスライダーへ即座にフォーカスを移すことができます。フォームのユーザビリティ向上や、音量調整・評価入力などのインターフェースで役立つ便利なプロパティなので、ぜひ活用してみてください。

  1. HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

    HTML DOMのInput Range（入力レンジ）オブジェクトのnameプロパティは、レンジ（範囲）入力フィールドのname属性を設定または取得するために使用されます。name属性は、フォームデータがサーバーへ送信された後にデータを識別するための重要な役割を果たします。また、JavaScript側でもname属性を利用してフォーム要素を参照し、後から動的に操作することができます。構文nameプロパティを設定する場合rangeObject.name = name引数として渡すnameには、レンジスライダーコントロールの名前を指定します。使用例それでは、Input Rangeのnameプロパテ

  2. HTML DOM Input Rangeのminプロパティとは?構文と使い方を解説

    HTML DOM Input RangeのminプロパティとはHTML DOMのInput Range minプロパティは、レンジスライダーコントロールのmin属性値を設定または取得するために使用されます。この属性はスライダーコントロールの最小値を示すもので、通常はmaxプロパティと組み合わせて、スライダーが移動できる値の範囲を定義する際に活用されます。構文minプロパティの構文は以下の通りです。minプロパティの値を設定する場合rangeObject.min = numberここで、numberはスライダーコントロールに設定する最小値を表します。minプロパティの値を取得する場合rangeO