jQueryでinputに数字のみ入力させるための本当に正しい方法

inputには絶対に半角数字しか入力させたくないってことありますよね?

検索してみるとそのためのコードがいくらでも出てくると思いますが、実は厳密に0~9以外は入力不可にしたいとなると結構大変です。

ということでその方法について紹介します。

何も考えずにコードを書くとこうなる

例えばなんでもいいので次のような input があるとしましょう。

この中で半角数字のみを入力できるようにしたいわけです。

 

そういう場合にまず思いつくのは次のようなコード

正規表現使っているし、数字以外は入力できない、完璧!

・・・と思ってしまいますがこのコード実は色々問題があります。

 

何が問題かというと次の2点

  • 矢印キーとか削除キーも入力できなくなる
  • 全角入力は普通に入力できちゃう

そもそも keydown というイベントタイプは半角文字が押された時しか動かないので全角は入力し放題です。

しかもその上、矢印キーとか削除キーとかの文字でないもの( = 制御キー )も入力できなくなってしまうのですごく不便になります。

 

そういう訳で普通に半角数字をフィルターするだけじゃダメなんですね。

じゃあどうやって制御キーとか全角を入力するの?、という話ですがちゃんと解決策はあるので、色々コードを紹介していきます。

削除とか矢印の制御キーは入力可にする

ではまずは半角数字に加えて制御キーを入力可にしてみるコードです。

そのコードは次のとおり

4行目で矢印キー( ASCIIでは37 ~ 40の間 )とバックスペースキー( = 8 )とデリートキー( = 46 )を入力可能にしています。

他にも制御キーはエンターとかシフトとかありますが、数字のみの場合はあまり気にする必要はないですね。

 

ちなみにASCIIでの制御キーの値は次のサイトで一覧が確認可能

http://faq.creasus.net/04/0131/CharCode.html

もし必要ならエンターキーとかも入力可にするといいかもしれないです

全角文字を入力不可にする

さっき紹介したように、普通に keydown で数字のみ判別すると全角文字も入力できちゃうんです。

なのでそれを防ぐために必要なのが次のコード

やってることは単純で keyup(キーが押された後) あるいは blur(inputからフォーカスが外れた後) が起きた時に半角数字以外を空文字に置き換えているだけです。

 

全角文字っていうのは半角と違ってエンターが押されて確定されるまではイベントは起きないようです。

なので確実に数字のみ入力にしたいならこういう処理も必要ですね。

全体のコード

ということでここまでで紹介してきたコードの全体像はこうなっています。

もしかしたら余計な処理を省けばもう少し短くできるかもですが、そこは工夫してください。

 

あとjQueryで数字だけ入力可にしたとしても、
サーバー側に送られてくるデータはいくらでも変えれるのでその処理も忘れずに

もしコードに何か問題点とか不備があったならコメントで教えてください。

inputでの入力制限についての関連記事

ここまでで数字のみ入力させる方法について解説しましたが、アルファベットを含む半角英数字のみを入力させる方法もあります。

そのやり方については次の記事でまとめた通り

日本語を入力させたくない場合などはこちらの方法を試すのがおススメです。

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください