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

HTML DOM Input Search の disabled プロパティとは？使い方を解説

disabled プロパティとは

HTML DOM の Input Search disabled プロパティは、検索フィールド（<input type="search">）を無効化するかどうかを設定、または取得するためのプロパティです。ブール値（true / false）を受け取り、true を指定すると要素が無効になり、false を指定すると有効になります。デフォルト値は false です。

無効化された検索フィールドは自動的にグレーアウト表示され、クリックや文字入力など、ユーザーによる一切の操作が受け付けられなくなります。

構文

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

searchObject.disabled = true|false
  • true … 検索フィールドを無効にする
  • false … 検索フィールドを有効にする（デフォルト値）

サンプルコード

Input Search disabled プロパティの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input search disabled Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>DISABLE ボタンをクリックすると、上の検索フィールドが無効になります</p>
<button type="button" onclick="disableSearch()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableSearch() {
        document.getElementById("SEARCH1").disabled = true;
        document.getElementById("Sample").innerHTML = "The search field is now disabled";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のように表示されます。

HTML DOM Input Search の disabled プロパティとは？使い方を解説

DISABLE ボタンをクリックすると：

HTML DOM Input Search の disabled プロパティとは？使い方を解説

コードの解説

上の例では、まず type="search"、id="SEARCH1"、name="fruits" を持つ <input> 要素を作成し、フォームの中に配置しています。

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

次に、ユーザーがクリックすると disableSearch() 関数を実行する DISABLE ボタンを用意しています。

<button type="button" onclick="disableSearch()">DISABLE</button>

disableSearch() 関数内では、getElementById() メソッドで対象の検索フィールドを取得し、その disabled プロパティを true に設定しています。これにより、検索フィールドはグレーアウトしてクリックできなくなり、ユーザーはもう操作できません。あわせて、id="Sample" の <p> 要素にメッセージを表示しています。

function disableSearch() {
    document.getElementById("SEARCH1").disabled = true;
    document.getElementById("Sample").innerHTML = "The search field is now disabled";
}

まとめ

disabled プロパティを使えば、JavaScript から検索フィールドの有効／無効を動的に切り替えられます。後から disabled を false に戻せば再び入力できるようになるため、「特定の条件を満たすまで入力を禁止したい」といったフォーム制御に幅広く活用できます。

  1. 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

  2. HTML DOM Input Search の defaultValue プロパティとは？設定・取得方法をわかりやすく解説

    HTML DOM の Input Search defaultValue プロパティは、検索フィールド（type=search）の初期値（デフォルト値）を設定または取得するために使用されます。要素の defaultValue とは、value 属性に割り当てられた値のことを指します。defaultValue プロパティと value プロパティの違いは次の通りです。defaultValue プロパティは元々設定されていたデフォルト値を保持し続けるのに対し、value プロパティはユーザーが検索フィールドに入力した内容に応じて変化します。この違いを理解しておくことが、フォーム操作において重要なポ