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

HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。

構文

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

passwordObject.readOnly = true|false

ここで、trueはパスワードフィールドが読み取り専用であることを示し、falseは編集可能であることを示します。なお、readOnlyプロパティのデフォルト値はfalseです。

サンプルコード

それでは、パスワードreadOnlyプロパティの使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>password readOnly property</h1>
Password: <input type="password" id="PASS1" >
<p>下のボタンをクリックして、上のフィールドのreadOnlyプロパティを変更してください</p>
<button onclick="changeRead()">CHANGE</button>
<script>
    function changeRead() {
        document.getElementById("PASS1").readOnly = true;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

CHANGEボタンをクリックすると、パスワード入力ボックス内に文字を入力できなくなります。

HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

コードの解説

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

まず、id「PASS1」を持つパスワード入力フィールドを作成しました。

Password: <input type="password" id="PASS1">

次に、ユーザーがクリックするとchangeRead()メソッドを実行するCHANGEボタンを作成しました。

<button onclick="changeRead()">CHANGE</button>

changeRead()メソッドでは、getElementById()メソッドを使用してtype属性がpasswordの入力要素を取得し、そのreadOnlyプロパティをtrueに設定しています。これにより、パスワードフィールドへのテキスト入力はできなくなりますが、要素自体はフォーカス可能な状態が維持されます。送信ボタンがクリックされると、フィールド内のテキストはサーバーへ送信されます。

function changeRead() {
    document.getElementById("PASS1").readOnly = true;
}
  1. HTML DOM パスワード入力フィールドの type プロパティとは？使い方を解説

    HTML DOM の Input Password オブジェクトが持つ type プロパティは、type 属性に「password」が設定された input 要素に関連付けられたプロパティです。このプロパティは、パスワード入力フィールドに対して常に文字列「password」を返します。 構文 パスワード型 input 要素の type プロパティは、以下のように記述します。 passwordObject.type サンプルコード それでは、Input Password の type プロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html

  2. HTML DOM Input PasswordのreadOnlyプロパティとは？使い方を徹底解説

    HTML DOMのInput Password readOnlyプロパティは、パスワード入力フィールドが読み取り専用かどうかを設定または取得するために使用されます。readOnlyプロパティを設定すると、要素は編集不可能になりますが、Tabキーやクリックによってフォーカスを得ることは可能です。また、読み取り専用の要素にデフォルト値が含まれている場合、フォーム送信時にはその値がサーバーへ送信されます。 構文 readOnlyプロパティを設定する構文は以下の通りです。 passwordObject.readOnly = true|false ここで、trueはパスワードフィールドが読み取り専用で