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

HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

HTML DOM の Input Email maxLength プロパティは、メールアドレス用の入力フィールド（<input type="email">）に対して、ユーザーが入力できる最大文字数を示す maxLength 属性を取得または設定するためのプロパティです。maxLength 属性が HTML 側で定義されていない場合、このプロパティは「-1」を返します。

maxLength を活用することで、フォーム送信前の段階で入力文字数を制限でき、無効なデータの送信を防ぎやすくなります。さらに、JavaScript から動的に値を書き換えれば、状況に応じて入力制限を柔軟に切り替えることも可能です。

構文

maxLength プロパティの基本構文は以下のとおりです。

値を取得する場合

inputEmailObject.maxLength

値を設定する場合（number には整数を指定）

inputEmailObject.maxLength = number

サンプルコード

それでは、Input Email maxLength プロパティを使った具体的な例を見てみましょう。このサンプルでは、現在の最大文字数を画面に表示しつつ、ボタン操作で動的に変更できるようにしています。

<!DOCTYPE html>
<html>
<head>
<title>Input Email maxLength</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form id="Multitech-MNC">
<fieldset>
<legend>Email-maxLength</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" placeholder="jkl@qwerty.com" maxLength="10">
</label>
<input type="button" onclick="logIN()" value="Log In">
<input type="button" onclick="changeMaxLength()" value="Change Maxlength">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   divDisplay.textContent = 'Maxlength: '+inputEmail.maxLength;
   function changeMaxLength() {
      inputEmail.maxLength += 5;
      divDisplay.textContent = 'Maxlength: '+inputEmail.maxLength;
   }
   function logIN(){
      if(inputEmail.value !== '')
         divDisplay.textContent = 'Logging Into: '+inputEmail.form.id;
      else
         divDisplay.textContent = 'Please enter valid email';
   }
</script>
</body>
</html>

コードのポイント

  • 初期状態では maxLength="10" が設定されているため、メールアドレスは最大 10 文字までしか入力できません。
  • 「Change Maxlength」ボタンをクリックすると changeMaxLength() 関数が呼び出され、maxLength に 5 が加算されます（10 → 15 → 20 …）。
  • 「Log In」ボタンでは、入力値が空でなければフォーム ID を表示し、空の場合は有効なメールアドレスの入力を促すメッセージを表示します。

実行結果

上記のコードをブラウザで実行すると、以下のように表示されます。

「Change Maxlength」ボタンをクリックする前 −

HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

「Change Maxlength」ボタンをクリックした後 − 最大文字数が 15 に増えていることが確認できます。

HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

「Log In」ボタンをクリックし、メールアドレスを入力した後 −

HTML DOMのInput Email maxLengthプロパティ徹底解説！取得・設定方法とサンプルコード

  1. HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。構文maxLengthプロパティの基本的な構文は以下の通りです。maxLengthプロパティの設定textObject.maxLength = integerここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場

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

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