jQueryでinput type=textをinput type=numberみたいに振るまわせる

jqueryのロゴ

HTML5になって、Formのパーツを構成する代表格であるinputタグに様々なタイプのものが追加されました。

従来では、大概はinput type=”text”というものを使ってFormのパーツを出力することが多かったのですが、input type=”number”だったり、input type=”range”だったり、様々なFormのパーツをHTMLだけで表現できるようになったのです!

一覧で見てみると、確かにたくさんのinput typeの種類があるなぁと思わされます。

さて、先日Formのみを作成するという仕事があったのですが、その中で数字しか入力をしないフォームのパーツをつくるときに、input type=”number”ではなくて、あえてinput type=”text”を使ってjQueryで数字しか入力できないように制御する方法を試してみたので、自分の備忘録用に書いてみたいと思います。

input type=”number”について説明してみる

input type=”number”は、数字のみを入力することができるフォームのパーツです。

See the Pen WpMjem by Tatsuya Kosuge (@castero) on CodePen.

数字のみを入力するようなケース、例えば商品の数量を入力したい時などに便利なフォームのパーツですね!
min属性を指定すると最小値を、max属性を設定すると最大値を設定することもできたりします。

最近ではブラウザ対応も進んできてはいますが、古いInternetExplolerなどでは対応していないものもあるので、古いブラウザも視野に入れて制作しなければならない時は、まだまだ悩みどころも多いです。
(ちなみに、古いブラウザでinput type=”number”を表示しようとすると、input type=”text”として表示されます)

input type=”text”をつかってjQueryで数字しか入力できないように制御する方法について

では、input type=”text”をつかってjQueryで数字しか入力できないようにフォームのパーツを制御する方法について紹介です!

PCのキーボードには、キーボード番号というものがついています。

たとえば、数字の0であれば、キーボード番号は48といったものになります。
このキーボード番号を使って、数字に対応したキーボード番号が一定の範囲外だったら、入力を拒否する、というのをjQueryで書いてみます。

キーボードが入力された時に発生したイベントでキーボード番号を判定するので、kewdownイベントを使用します。
キーボード入力キャンセルをするのはreturn falseを使うと簡単に実装できます!

キーボード番号をいろいろと調整すれば、バリエーションを広げられますよ!
(今回のサンプルでは、1〜4以外が入力されたら入力キャンセルするように実装しています)

まとめ

今回はjQueryでinput type=textをinput type=numberみたいに振るまわせる方法を書いてみました!

キーボード番号を活用する方法は意外と使える方法だと思うので、他にもいろいろと活用できる方法を探してみたいと思います!

スポンサーリンク

シェアする

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

フォローする