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

HTML DOM Select autofocusプロパティの使い方を徹底解説

HTML DOM Select autofocusプロパティとは

HTML DOMのselect autofocusプロパティは、ページが読み込まれた際にドロップダウンリスト（<select>要素）へ自動的にフォーカスを当てるかどうかを、取得および設定できるプロパティです。

このプロパティを活用することで、ユーザーがページを開いた瞬間に特定の選択リストへ入力できる状態にしたり、逆に自動フォーカスを無効化して意図しない操作を防いだりすることが可能になります。

構文（Syntax）

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

1. autofocusの値を取得する場合

object.autofocus

2. autofocusの値を設定（変更）する場合

object.autofocus = true | false
  • true：ページ読み込み時にドロップダウンリストへフォーカスを当てる
  • false：自動フォーカスを無効にする

サンプルコード

それでは、HTML DOM select autofocusプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
    body{
        text-align:center;
        color:#fff;
        background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
        height:100vh;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    .drop-down{
        display:block;
        width:35%;
        border:none;
        font-weight:bold;
        padding:10px;
        margin:1rem auto;
        background-color:#ffffff7a;
        outline-color:black;
    }
    .btn{
        background:orange;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        font-weight:bold;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
<option>Economics</option>
<option>Hindi</option>
<option>Biology</option>
</select>
<br>
<button onclick="disable()" class="btn">Disable Autofocus</button>
<script>
    function disable() {
        document.querySelector(".drop-down").autofocus = false;
    }
</script>
</body>
</html>

コードの解説

このサンプルでは、科目を選択するためのドロップダウンリストを作成しています。「Disable Autofocus」ボタンをクリックすると、JavaScriptのdisable()関数が実行され、document.querySelector()で取得したselect要素に対してautofocus = falseが設定され、自動フォーカスが解除されます。

実行結果（Output）

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

HTML DOM Select autofocusプロパティの使い方を徹底解説

続いて、「Disable Autofocus」ボタンをクリックすると、ドロップダウンリストのautofocusが無効化されます。

HTML DOM Select autofocusプロパティの使い方を徹底解説

まとめ

select autofocusプロパティを使えば、ページ読み込み時のフォーム要素へのフォーカス制御をJavaScriptから柔軟に行えます。ユーザビリティ向上のためのフォーム設計において、ぜひ活用してみてください。

  1. HTML DOM Buttonのautofocusプロパティとは？使い方をサンプルコードで解説

    HTML DOM の Button autofocus プロパティは、<button> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に、HTML ドキュメント上のボタンが自動的にフォーカスを取得するかどうかを指定できます。 構文 Button autofocus プロパティの構文は以下のとおりです。 autofocus プロパティの設定 buttonObject.autofocus = true|false true または false の値によって、ページ読み込み時に入力ボタンがフォーカスを取得するかどうかが決

  2. HTML DOM Textarea autofocusプロパティの使い方をわかりやすく解説

    HTML DOMのTextarea autofocusプロパティは、ページが読み込まれた際にテキストエリア（textarea要素）へ自動的にフォーカスを当てるかどうかを、取得および設定できるプロパティです。 構文（Syntax） autofocusプロパティの基本的な構文は以下の通りです。 1. autofocusの値を取得する場合 object.autofocus 2. autofocusの値を設定（変更）する場合 object.autofocus = true | false trueを設定すると自動フォーカスが有効になり、falseを設定すると無効になります。 サンプルコード それでは、