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

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

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

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

oninputを使う

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

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

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

デモ

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

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

CAPTCHA