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

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

HTML DOM Input Search autofocusプロパティとは

HTML DOMのInput Search autofocusプロパティは、HTMLの<input>要素が持つautofocus属性と連動するプロパティです。このプロパティを利用することで、ページが読み込まれた際に検索入力フィールドへ自動的にフォーカスを当てるかどうかを、設定または取得することができます。

構文

autofocusプロパティを設定する場合の構文は以下のとおりです。

searchObject.autofocus = true|false

trueを指定すると検索フィールドにフォーカスが当てられ、falseを指定すると当てられません。デフォルト値はfalseに設定されています。

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>下のボタンをクリックすると、上の検索フィールドのautofocus属性の値を取得できます。</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
    function FocusVal() {
        var R = document.getElementById("SEARCH1").autofocus;
        document.getElementById("Sample").innerHTML = "The search field has autofocus property set to "+R;
}
</script>
</body>
</html>

実行結果

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

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

「CHECK FOCUS」ボタンをクリックすると、以下のようにautofocusプロパティの値が表示されます。

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

コードの解説

この例では、まずtype="search"、id="SEARCH1"、name="fruits"を持ち、autofocus属性がtrueに設定された<input>要素を、フォーム内に作成しています。

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>

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

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

FocusVal()メソッドでは、getElementById()メソッドを使ってtype="search"の入力要素を取得し、そのautofocusプロパティの値を読み取ります。autofocusプロパティは、検索フィールドのautofocus属性の値に応じてtrueまたはfalseを返します。取得した値は変数に格納され、innerHTMLプロパティを通じてid「Sample」の段落に表示されます。

function FocusVal(){
    var f = document.getElementById("SEARCH1").autofocus;
    document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
}
  1. HTML DOM入力検索値（value）プロパティの使い方を解説

    HTML DOMのInput Search（type=search）におけるvalueプロパティは、検索フィールドのvalue属性に関連付けられたプロパティです。このプロパティを利用することで、検索フィールドに入力されている値を取得したり、JavaScriptから任意の値を設定したりすることができます。また、検索フィールドのデフォルト値を指定する目的でも使われ、ユーザーがテキストを入力すると、その値はユーザーの入力内容に置き換わります。構文valueプロパティの基本的な構文は以下の通りです。値を設定する場合searchObject.value = text;「text」の部分には、検索フィール

  2. HTML DOM Input Searchタイププロパティの使い方とサンプルコード

    HTML DOMのInput Searchタイププロパティは、type=searchが指定されたinput要素に関連付けられているプロパティです。このプロパティは、検索用input要素に対して常に文字列「search」を返します。構文Searchタイププロパティの構文は以下のとおりです。searchObject.typeサンプルコードそれでは、Input Searchタイププロパティの使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>Search type property</h1> <