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

HTML DOM入力検索値（value）プロパティの使い方を解説

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

構文

valueプロパティの基本的な構文は以下の通りです。

値を設定する場合

searchObject.value = text;

「text」の部分には、検索フィールドに設定したい値を指定します。

サンプルコード

それでは、Input Searchのvalueプロパティを使った具体的な例を見ていきましょう。ボタンをクリックすると、検索フィールドに入力された値を取得して表示するシンプルなデモです。

<!DOCTYPE html>
<html>
<body>
<h1>Input search Value property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>下のボタンをクリックして、上の要素の値を取得してみましょう</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
    function getValue() {
        var t = document.getElementById("SEARCH1").value;
        document.getElementById("Sample").innerHTML = "検索フィールドの値は : "+t;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM入力検索値（value）プロパティの使い方を解説

テキストを入力して「Get Value」ボタンをクリックすると、入力した値が取得され、以下のように画面に表示されます。

HTML DOM入力検索値（value）プロパティの使い方を解説

まとめ

Input Searchのvalueプロパティを使えば、JavaScriptから検索フィールドの現在の値を読み取ったり、新しい値を代入したりできます。フォームの入力内容をリアルタイムに処理したい場合など、Webアプリケーション開発で頻繁に活用される重要なプロパティなので、ぜひ覚えておきましょう。

  1. HTML DOM Input Search maxLengthプロパティの使い方｜検索フィールドの最大入力文字数を設定・取得する方法

    HTML DOM の Input Search maxLength プロパティは、検索フィールド（<input type=search>）の maxlength 属性を設定または取得するために使用されるプロパティです。maxLength プロパティを利用することで、検索フィールドに入力できる最大文字数を指定できます。 構文（Syntax） maxLength プロパティを設定する場合の構文は以下の通りです。 searchObject.maxLength = integer integer には、検索フィールドに入力可能な最大文字数を指定します。デフォルト値は 524288 です。

  2. HTML DOM 入力検索フィールドの form プロパティの使い方とサンプルコード

    HTML DOM の Input Search form プロパティは、指定された入力検索フィールド（type=search）を含むフォームへの参照を返すために使用されます。検索フィールドがフォームの外に配置されている場合は、単純に NULL が返されます。なお、このプロパティは読み取り専用です。 構文 input search の form プロパティの構文は以下のとおりです。 searchObject.form サンプルコード HTML DOM Input search form プロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html&g