<input type="text">で数値のみ入力する方法

<input type=”text”>で数値のみ入力する方法

入力部品でtype=”number”とすると数値のみ入力することが出来ますがモダンブラウザでもmaxlength属性が効かなくなってしまいます。

type=”text”のままで数値のみにするにはpattern属性を使用して数値のみにすることが出来ますが、この数値チェックはsubmitのタイミングなので入力時チェックはpatternではできません。

oninputを使用して入力イベントを全てチェックして解決することが出来ます。

この場合、type=”text”のままなのでmaxlengthも効かせることができます。

具体的には正規表現で数値以外が入力されたら空文字に置換してあげたら数値のみ入力する事が出来るようになります。

<input type="text" maxlength="5" oninput="value = value.replace(/[^0-9]+/i,'');" />

モダンブラウザでnumberのスピナーボタンを表示したい（インクリメント、デクリメントしたい）場合はmax属性を使えばmaxlengthが効いている風にすることができます。

以下は最大5桁（maxlength=”5″）とした場合にmax=”99999″とした例です。onkeyup時にキーボードから入力された数値が5桁以上の場合はsliceしています。

<input type="number" onkeyup="value = value.length > 5 ? value.slice(0,5): value;" max="99999" />

ちょっと話がずれますが、inputmode="numeric"という指定ができるようです。

maxlengthは効きません。

<input maxlength="5" type="number" />

これはスマホ向けで、キーボードが数字入力モードに切り替わり、ユーザーが簡単に数字を入力できるようになります。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^