【JavaScript】maxlengthやminlength属性を削除する方法

maxlength / minlength 属性は、入力できる文字数を制限するために使います。ただし「入力モードを切り替えたら制限を外したい」など、JavaScriptで動的に削除・変更したい場面があります。

削除自体は removeAttribute() 一行ですが、属性とプロパティの違いや、maxlength と minlength の挙動の違いを知っておくと、つまずかずに扱えます。

maxlength・minlengthを削除する（removeAttribute）

属性の削除には removeAttribute() を使います。削除すると文字数制限がなくなります。

<input type="text" id="myInput" maxlength="10" minlength="5">

const input = document.getElementById("myInput");

input.removeAttribute("maxlength");
input.removeAttribute("minlength");

削除後は、それ以降の入力に文字数制限がかからなくなります（すでに入力されている値が切り詰められることはありません）。

属性とプロパティ（element.maxLength）

HTML属性 maxlength は、JavaScriptのプロパティ element.maxLength（先頭以外が大文字）に対応しています。プロパティで現在の上限を読み取れます。

console.log(input.maxLength); // 例: 10

// 属性を削除すると、プロパティは -1（制限なし）になる
input.removeAttribute("maxlength");
console.log(input.maxLength); // -1

削除でなく「変更」する

上限を外すのではなく別の値に変えたい場合は、プロパティに代入するか setAttribute() を使います。

// プロパティで変更（手軽）
input.maxLength = 100;

// setAttribute で変更（文字列で指定）
input.setAttribute("maxlength", "100");

条件によって動的に切り替える

実用例として、チェックボックスのON/OFFで制限を付け外しする例です。removeAttribute と setAttribute を切り替えます。

const input = document.getElementById("myInput");
const noLimit = document.getElementById("noLimit"); // チェックボックス

noLimit.addEventListener("change", () => {
  if (noLimit.checked) {
    input.removeAttribute("maxlength");   // 制限を外す
  } else {
    input.setAttribute("maxlength", "10"); // 制限を戻す
  }
});

maxlengthとminlengthの挙動の違い

削除・変更の前に、2つの属性の効き方の違いを押さえておきましょう。ここを誤解していると「minlengthを設定したのに少ない文字数で入力できてしまう」と戸惑います。

• maxlength：上限を超えて入力できない（タイピング自体が止まる、ハードな制限）
• minlength：下限未満でも入力はできる。送信時にだけ検証エラーになる（ソフトな制限）

// minlength未満のまま送信しようとすると true
console.log(input.validity.tooShort);

// maxlengthは入力時点で止まるため、通常 tooLong は false
console.log(input.validity.tooLong);

このため、最小文字数を入力中にチェックしたいなら、input イベントで自分で value.length を確認します。フォーム全体の検証は簡単な入力チェックを行う方法、文字数のリアルタイム表示はフォーム入力をリアルタイムで監視する方法を参考にしてください。

よくある質問（FAQ）

まとめ

maxlength / minlength の削除は removeAttribute() で行います。上限を変更するだけなら、プロパティ element.maxLength か setAttribute() を使います。

押さえておきたいのは、maxlength は入力そのものを止めるのに対し、minlength は送信時にしか検証されないという違いです。入力中に最小文字数をチェックしたいなら、input イベントで自分で判定しましょう。