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

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

HTML DOM の Input Text disabled プロパティは、テキストフィールドを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されるプロパティです。値にはブール型（true / false）を指定し、true は「要素を無効にする」、false は「要素を有効のままにする」ことを意味します。デフォルト値は false です。

disabled プロパティが true に設定されたテキストフィールドは、グレーアウトして表示され、ユーザーによるクリックや入力操作を受け付けなくなります。フォームの一時的な入力禁止や、特定の条件を満たすまで入力欄をロックしたい場合などに活用できます。

構文

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

textObject.disabled = true|false;

true を指定するとテキストフィールドが無効化され、false を指定すると有効化されます。初期値は false であるため、何も指定しなければテキストフィールドは通常どおり入力可能な状態になっています。

サンプルコード

それでは、Input Text disabled プロパティの具体的な使用例を見ていきましょう。以下の例では、ボタンをクリックするとテキストフィールドが無効化される仕組みを実装しています。

<!DOCTYPE html>
<html>
<body>
<h1>Input Text disabled Property</h1>
USERNAME: <input type="text" id="TEXT1" autofocus>
<p>下の DISABLE ボタンをクリックすると、上のテキストフィールドが無効化されます</p>
<button type="button" onclick="disableText()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableText() {
        document.getElementById("TEXT1").disabled = true;
        document.getElementById("Sample").innerHTML = "テキストフィールドは無効化されました";
    }
</script>
</body>
</html>

コードのポイント

  • document.getElementById() で対象のテキストフィールドを取得します。
  • ボタンの onclick イベントで disableText() 関数を呼び出します。
  • 関数内で disabled = true を設定し、テキストフィールドを無効化します。
  • あわせてメッセージを表示して、ユーザーに状態の変化を伝えています。

実行結果

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

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

ここで DISABLE ボタンをクリックすると、テキストフィールドがグレーアウトして無効化され、入力できなくなります。

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

このように disabled プロパティを使えば、JavaScript から簡単にテキストフィールドの有効・無効を切り替えることができます。なお、無効化された要素はフォーム送信時にも値が送信されない点に注意してください。状況に応じて readOnly プロパティとの使い分けも検討するとよいでしょう。

  1. HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。

  2. HTML DOM 入力テキストの readOnly プロパティの使い方を徹底解説

    HTML DOM の readOnly プロパティは、テキスト入力フィールド（input type=text）が読み取り専用かどうかを設定・取得するために使用されるプロパティです。 readOnly を true に設定すると、その要素はユーザーによって編集できなくなります。ただし、読み取り専用の要素であっても、Tab キーやクリックによるフォーカスは可能です。また、readonly 属性が設定された要素に初期値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。これは disabled 属性との大きな違いであり、disabled では値が送信されない点に注意が必要です。 構