【htmlタグ】inputタグのtypeにnumberを指定するとmaxlengthが使えない問題

html5からあらたに追加されたinputのtype=”number”は数字を入力させる上でとても便利です。

<input type="number">

numberは便利なtype属性ですが問題点もあります。

inputタグのtypeにnumberを指定して入力を制限をするとmaxlengthが効かなくなります。

これはどうも仕様のようです。

type属性がtextであれば問題なく動作します。

numberだとmaxやminでのバリデーションは指定できるけど文字数制限はできないようです。

その場合はjavascriptで入力制限を指定してあげます。

type属性にnumberを指定するとmaxlengthが使えない

解決策

解決策の一つとしてはinputタグにjavascriptを追加して入力制限をする方法です。

<input type="number" oninput="javascript:if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" min="1" max="99">

サンプル

サンプルではinputのtype属性にnumberを指定したうえでmin、max、maxlengthをそれぞれ指定したパターンと最後にinputタグにjavascriptを追加して入力制限したパターンを表示させています。