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

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

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

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

oninputを使う

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

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

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

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

input type=”number”でmaxlengthを効かせる

モダンブラウザで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”

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

maxlengthは効きません。

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

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

デモ

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました