HTMLフォームを作成する際に、inputタグのtype属性にnumberを指定することがあります。しかし、この場合にmaxlength属性が無効になることをご存知でしょうか？この記事では、この問題を回避するための方法をご紹介します。
なぜmaxlengthが使えないのか？
inputタグにtype=”number”を指定すると、ブラウザはそのフィールドに数字のみを入力できるようにします。しかし、numberタイプの入力フィールドでは、maxlength属性がサポートされていません。これは、仕様上の制限です。
JavaScriptを使った解決策
この制限を回避するためには、JavaScriptを使って手動で入力制限を設定する必要があります。以下のコード例では、JavaScriptを使ってmaxlengthを実現する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Input with Maxlength</title>
</head>
<body>
<form>
<label for="numberInput">Number (max 5 digits): </label>
<input type="number" id="numberInput" maxlength="5" />
</form>
<script>
document.getElementById('numberInput').addEventListener('input', function() {
let maxLength = 5;
let value = this.value;
if (value.length > maxLength) {
this.value = value.slice(0, maxLength);
}
});
</script>
</body>
</html>
上記のコードでは、inputタグにnumberタイプを指定し、id属性でnumberInputを設定しています。そして、inputイベントリスナーを追加し、入力された値の長さを監視します。値の長さがmaxlengthで指定した長さを超えた場合、その超過部分を切り捨てることで、実質的にmaxlengthを実現しています。
よくある質問（FAQ）
Q. input type=”number”でmaxlength属性が効かない理由は？
A. maxlengthはテキスト入力向けのHTML属性で、type=”number”には対応していません。数値入力の上限はmax属性で設定するか、inputイベントで桁数をJavaScriptで制限してください。
Q. 数値入力の桁数をJavaScriptで制限するには？
A. inputイベントでvalue.toString().replace(“.”, “”).length > maxDigitsの条件で超過した場合に値をトリムします。または文字列として扱い、数字以外を除去してから桁数チェックします。
Q. スピナーを非表示にして数値入力をテキスト風にするには？
A. CSSのinput[type=number]::-webkit-inner-spin-buttonとinput[type=number]::-webkit-outer-spin-buttonでappearanceをnoneに設定します。Firefoxにはinput[type=number] { -moz-appearance: textfield; }が必要です。
まとめ
inputタグにtype=”number”を指定した場合にmaxlength属性が使えない問題は、JavaScriptを使うことで解決できます。この方法を使えば、ユーザーの入力を適切に制限し、望ましいフォームの動作を実現できます。フォームの作成時にはぜひ参考にしてみてください。
