HTML DOM入力テキストのmaxLengthプロパティとは？使い方をわかりやすく解説
HTML DOMのInput Text maxLengthプロパティは、テキスト入力フィールドのmaxlength属性を設定または取得するために使用されます。このプロパティを利用することで、テキストフィールドに入力できる最大文字数を指定したり、現在設定されている値を参照したりすることができます。
構文
maxLengthプロパティの基本的な構文は以下の通りです。
maxLengthプロパティの設定
textObject.maxLength = integer
ここで「integer」には、テキストフィールドに入力できる最大文字数を整数で指定します。なお、maxlength属性が明示的に指定されていない場合、既定値は524288となっています。
また、現在設定されている最大文字数を取得したい場合は、次のように記述します。
let len = textObject.maxLength;
サンプルコード
それでは、maxLengthプロパティの具体的な使用例を見てみましょう。以下の例では、初期状態で最大5文字に設定されている入力フィールドに対し、ボタンのクリックによって最大文字数を15に変更しています。
<!DOCTYPE html>
<html>
<body>
<h1>Input Text maxLengthプロパティ</h1>
ユーザー名： <input type="text" id="USR" maxLength="5">
<p>下のボタンをクリックすると、上のフィールドに入力できる最大文字数が増加します</p>
<button onclick="changeMax()">文字数を変更</button>
<p id="Sample"></p>
<script>
function changeMax() {
document.getElementById("USR").maxLength = "15";
document.getElementById("Sample").innerHTML = "最大文字数が15に増加しました";
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、以下のような画面が表示されます。maxLengthに「5」が設定されているため、初期状態では5文字までしか入力できません。
続いて、「文字数を変更」ボタンをクリックすると、maxLengthプロパティによって最大文字数が15に更新され、次のように表示されます。
まとめ
maxLengthプロパティを使えば、JavaScriptから動的にテキスト入力フィールドの文字数制限を操作できます。フォームのバリデーションやユーザーの入力補助など、用途に応じて柔軟に活用してみてください。
-
HTML DOMのInput Text formプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ
-
HTML DOM TextareaのmaxLengthプロパティとは？使い方をコード例付きで解説
HTML DOMのTextarea maxLengthプロパティは、HTMLドキュメント内のテキストエリア（<textarea>）要素に設定されているmaxLength属性の値を取得（参照）および変更（設定）するためのプロパティです。 maxLength属性は、テキストエリアに入力できる最大文字数を制限する役割を持ちます。このプロパティを活用すれば、JavaScriptから動的に文字数制限の確認や変更を行うことができます。 構文 maxLengthプロパティの基本的な構文は以下のとおりです。 1. maxLengthの値を取得する場合 object.maxLength 2. ma