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

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

HTML DOM の Input Password disabled プロパティは、パスワード入力フィールドを無効化するかどうかを設定・取得するために使用されるプロパティです。真偽値（boolean）を扱い、true は要素を無効にすること、false は有効であることを表します。デフォルト値は false です。無効化された要素は自動的にグレーアウト表示され、クリックやキーボード操作を受け付けなくなります。

構文

disabled プロパティの設定は、以下の構文で行います。

passwordObject.disabled = true|false;

true を指定するとパスワードフィールドが無効化され、false を指定すると有効な状態に戻ります。初期値は false です。

使用例

それでは、Input Password disabled プロパティを使った具体的なサンプルを見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Password disabled プロパティ</h1>
パスワード： <input type="password" id="PASS">
<p>DISABLE ボタンをクリックすると、上記のパスワードフィールドが無効化されます</p>
<button type="button" onclick="disablePass()">DISABLE</button>
<p id="Sample"></p>
<script>
   function disablePass() {
      document.getElementById("PASS").disabled=true;
      document.getElementById("Sample").innerHTML = "パスワードフィールドは現在無効になっています";
   }
</script>
</body>
</html>

実行結果

このコードをブラウザで開くと、次のような画面が表示されます。

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

続いて、「DISABLE」ボタンをクリックしてみましょう。

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

コードの解説

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

1. パスワード入力フィールドの作成

まず、id に「PASS」を持つパスワード入力フィールドを作成しています。この時点では disabled プロパティはデフォルトの false に設定されており、通常どおり入力可能な状態です。

パスワード： <input type="password" id="PASS" value="abcd123">

2. DISABLE ボタンの配置

次に、ユーザーがクリックすると disablePass() メソッドを実行するボタンを設置しています。

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

3. disablePass() メソッドによる無効化処理

disablePass() メソッド内では、getElementById() メソッドを使って対象のパスワード入力フィールドを取得し、その disabled プロパティを true に設定しています。これにより、パスワードフィールドは無効化され、視覚的にもグレーアウトされます。さらに、id「Sample」の段落の innerHTML プロパティを使って、フィールドが無効になったことを知らせるメッセージを画面に表示しています。

function disablePass() {
   document.getElementById("PASS").disabled=true;
   document.getElementById("Sample").innerHTML = "パスワードフィールドは現在無効になっています";
}

活用シーン

disabled プロパティは、フォーム送信中の一時的な入力防止や、特定の条件を満たすまでユーザーの入力を制限したい場合など、Web アプリケーションの UI 制御において非常に役立ちます。また、element.disabled のように参照すれば、現在の有効／無効状態をプログラムから取得することも可能です。


  1. HTML DOM パスワード入力フィールドのvalueプロパティとは？使い方を徹底解説

    HTML DOM Input Password のvalueプロパティとはHTML DOMのInput Passwordにおけるvalueプロパティは、type属性が「password」に設定されたinput要素に関連付けられたプロパティです。このプロパティを使用することで、パスワードフィールドのデフォルト値を指定したり、ユーザーが入力した値を取得・変更したりすることができます。構文valueプロパティを設定する場合の構文は以下の通りです。passwordObject.value = text;ここでの「text」には、パスワードフィールドに設定したい値を指定します。サンプルコードinput

  2. HTML DOM パスワード入力フィールドのplaceholderプロパティの使い方

    HTML DOM の Input Password（パスワード入力）オブジェクトにおける placeholder プロパティは、パスワード入力フィールドの placeholder 属性の値を取得・設定するために使用されます。placeholder（プレースホルダー）は、ユーザーが何も入力していない状態で入力フィールド内にヒントとなるテキストを表示する機能です。デフォルトではグレー表示され、value プロパティとは異なり、フォーム送信時にはその値が送信されない点に注意してください。構文placeholder プロパティを設定する場合の構文は以下のとおりです。passwordObject.pla