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

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

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

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

oninputを使う

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

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

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

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

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

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

デモ

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA