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

HTML DOM 入力パスワードのmaxLengthプロパティとは？使い方とサンプルコードを徹底解説

HTML DOM の Input Password maxLength プロパティは、パスワード入力フィールド（<input type="password">）の maxlength 属性を設定または取得するために使用されるプロパティです。この maxLength プロパティを利用することで、パスワードフィールドにユーザーが入力できる最大文字数を指定したり、現在設定されている値を取得したりすることができます。

構文

maxLength プロパティを設定する場合

passwordObject.maxLength = integer

ここで integer には、パスワードフィールドに入力できる最大文字数となる整数値を指定します。たとえば「10」を設定すれば、ユーザーは最大10文字までしか入力できなくなります。

サンプルコード

それでは、maxLength プロパティを使った具体的な例を見ていきましょう。次のコードでは、ボタンをクリックするとパスワードフィールドの最大文字数が変更されます。

<!DOCTYPE html>
<html>
<body>
<h1>Input Password maxLength Property</h1>
Password: <input type="password" id="PASS" maxLength="5">
<p>下のボタンをクリックすると、上記フィールドに入力できる最大文字数が増加します</p>
<button onclick="changeMax()">CHANGE LENGTH</button>
<p id="Sample"></p>
<script>
   function changeMax() {
      document.getElementById("PASS").maxLength = "15";
      document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15";
   }
</script>
</body>
</html>

実行結果

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

HTML DOM 入力パスワードのmaxLengthプロパティとは？使い方とサンプルコードを徹底解説

「CHANGE LENGTH」ボタンをクリックして、さらに多くの文字を入力した場合の表示は以下のとおりです。

HTML DOM 入力パスワードのmaxLengthプロパティとは？使い方とサンプルコードを徹底解説

コードの解説

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

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

まず、id に「PASS」を持ち、maxLength 属性の値が「5」に設定されたパスワード入力フィールドを作成しています。これにより、初期状態ではこのフィールドには最大5文字までしか入力できません。

Password: <input type="password" id="PASS" maxLength="5">

2. ボタンの設置

次に、「CHANGE LENGTH」というボタンを作成しています。このボタンは、ユーザーによってクリックされると changeMax() メソッドを実行します。

<button type="button" onclick="changeMax()">CHANGE LENGTH</button>

3. changeMax() メソッドによる文字数制限の変更

changeMax() メソッドでは、getElementById() メソッドを使って該当するパスワード入力フィールドを取得し、その maxLength プロパティを「15」に変更しています。さらに、id が「Sample」である段落要素の innerHTML プロパティを使って、変更内容を示すメッセージを画面に表示しています。

function changeMax() {
   document.getElementById("PASS").maxLength = "15";
   document.getElementById("Sample").innerHTML = "Maximum number of characters are now increased to 15";
}

このように maxLength プロパティを活用すれば、JavaScript から動的にパスワードフィールドの文字数制限をコントロールできます。フォームのバリデーションやユーザビリティの向上にも役立つため、ぜひ覚えておきましょう。

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

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

  2. HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説

    HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma