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

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

HTML DOM の Input Reset autofocus プロパティは、HTML <input> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれたときにリセットボタンへ自動的にフォーカスを当てるかどうかを、設定または取得できます。

構文

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

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

resetObject.autofocus = true|false

true を指定するとリセットボタンがフォーカスを受け取り、false を指定した場合はフォーカスされません。デフォルト値は false です。

サンプルコード

Input Reset autofocus プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1> Reset Autofocus property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1" autofocus>
</form>
<p>Get the reset button autofocus property value by clicking the below button</p>
<button type="button()" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
   function FocusVal(){
      var f = document.getElementById("RESET1").autofocus;
      document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
   }
</script>
</body>
</html>

出力結果

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

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

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

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

コードの解説

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

まず、type="reset"、id="RESET1" を持つ <input> 要素を作成しています。このボタンをクリックすると、フォーム内のデータがリセットされます。このボタンは 2 つのテキストフィールドを含むフォームの中に配置されており、フォームにはインラインスタイルも適用されています。

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

続いて、ユーザーがクリックすると FocusVal() メソッドを実行する CHECK ボタンを作成しています。

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

FocusVal() メソッドでは、getElementById() メソッドを使って type が reset の input 要素を取得し、その autofocus プロパティの値を読み取ります。autofocus プロパティは、リセットボタンの autofocus 属性の設定に応じて true または false を返します。この値は変数 f に代入され、innerHTML プロパティを通じて id が「Sample」の段落要素に出力されます。

function FocusVal(){
   var f = document.getElementById("RESET1").autofocus;
   document.getElementById("Sample").innerHTML = "The reset button autofocus property is set to: "+f;
}
  1. HTML DOM Input Submit autofocusプロパティの使い方を徹底解説

    HTML DOMのInput Submit autofocusプロパティは、HTMLの<input>要素が持つautofocus属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれた際に送信ボタン（submitボタン）へ自動的にフォーカスを当てるかどうかを、設定または取得することができます。構文（Syntax）autofocusプロパティの構文は以下の通りです。autofocusプロパティの設定submitObject.autofocus = true|false「true」を指定すると送信ボタンが自動的にフォーカスされ、「false」を指定するとフォ

  2. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled