inputタグのtype属性にnumberを指定した際にmaxlength属性を使う方法

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を実現しています。


まとめ

inputタグにtype=”number”を指定した場合にmaxlength属性が使えない問題は、JavaScriptを使うことで解決できます。この方法を使えば、ユーザーの入力を適切に制限し、望ましいフォームの動作を実現できます。フォームの作成時にはぜひ参考にしてみてください。