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

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

HTML DOM の Button autofocus プロパティは、<button> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に、HTML ドキュメント上のボタンが自動的にフォーカスを取得するかどうかを指定できます。

構文

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

autofocus プロパティの設定

buttonObject.autofocus = true|false

true または false の値によって、ページ読み込み時に入力ボタンがフォーカスを取得するかどうかが決まります。

  • true − ボタンがフォーカスを取得します
  • false − ボタンはフォーカスを取得しません

サンプルコード

HTML DOM の Button autofocus プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<button type="button" id="MyButton" autofocus>BUTTON</button>
<p>下のボタンをクリックすると、上の入力ボタンがページ読み込み時に自動的にフォーカスを取得したかどうかを確認できます</p>
<button onclick="buttonFocus()">CLICK IT</button>
<p id="Sample"></p>
<script>
    function buttonFocus() {
        var x = document.getElementById("MyButton").autofocus;
        if(x==true)
            document.getElementById("Sample").innerHTML="この入力ボタンはページ読み込み時にフォーカスを取得します";
        else
            document.getElementById("Sample").innerHTML="この入力ボタンはページ読み込み時にフォーカスを取得しません";
    }
</script>
</body>
</html>

出力結果

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

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

「CLICK IT」ボタンをクリックすると、判定結果が表示されます。

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

コードの解説

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

まず、id が「MyButton」で autofocus 属性が有効になっているボタンを用意します。

<button type="button" id="MyButton" autofocus>BUTTON</button>

次に、クリックすると buttonFocus() 関数を実行する「CLICK IT」ボタンを配置します。

<button onclick="buttonFocus()">CLICK IT</button>

buttonFocus() 関数では、getElementById() メソッドを使ってボタン要素を取得し、その autofocus プロパティの値（ブール値）を変数 x に代入しています。続いて条件分岐により autofocus の値が true か false かを判定し、id が「Sample」の <p> 要素に対応するメッセージを表示します。

function buttonFocus() {
    var x = document.getElementById("MyButton").autofocus;
    if(x==true)
        document.getElementById("Sample").innerHTML="この入力ボタンはページ読み込み時にフォーカスを取得します";
    else
        document.getElementById("Sample").innerHTML="この入力ボタンはページ読み込み時にフォーカスを取得しません";
}

補足：autofocus 属性のポイント

autofocus は HTML5 で導入された論理属性（boolean attribute）であり、属性名を記述するだけで有効になります。また、1つのページ内で autofocus を設定できる要素は原則として1つだけである点に注意してください。複数の要素に設定した場合、ブラウザによってどの要素にフォーカスが当たるかが異なる可能性があります。フォームの初期入力欄など、ユーザーに最初に操作してほしい要素に対して活用すると効果的です。

  1. HTML DOM Input Reset autofocusプロパティの使い方を徹底解説

    HTML DOM の Input Reset autofocus プロパティは、HTML <input> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれたときにリセットボタンへ自動的にフォーカスを当てるかどうかを、設定または取得できます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティを設定する場合：resetObject.autofocus = true|falsetrue を指定するとリセットボタンがフォーカスを受け取り、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を設定すると無効になります。 サンプルコード それでは、