今回はjQueryで入力値が数字かどうかをリアルタイムでチェックし、数字じゃない場合は弾くというリアルタイム数字バリデーション機能の作り方を解説します。
お問合せフォームのinputに数字のみ入力できるフォームを作りたい、リアルタイムで入力値を検証できるようにしたい、といった場合に使えそうです。
リアルタイム数字バリデーションに必要な機能
どうやって実装するかを考えます。
今回は以下のような形で作ってみます。
- 正の数の半角数字のみ入力可能（マイナス値は入力させない）
- 半角数字以外の文字は入力させない（記号、全角文字など）
- 全角数字は自動で半角数字に直す
要は半角の0から9までのみ入力可能、それ以外は入力不可、全角数字は半角数字に自動で訂正って感じです。
リアルタイム数字バリデーション機能の作り方
早速結論ですが、以下のコードで実装できます。
<input type="text" id="text">
$(function() {
$('#text').on('input', function() {
let value = $(this).val();
value = value
.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
})
.replace(/[^0-9]/g, '');
$(this).val(value);
});
});
実際のサンプルが以下になります。
半角数字以外をの文字入力しても入力できない上、全角数字を入力すると自動で半角数字に訂正して入力されます。判定がリアルタイムで行われていることもわかりますね。
See the Pen
by wagashi000327 (@wagashi000327)
on CodePen.
解説
簡単にコードの解説をしておきます。
.on('input', function() {})で使われているinputイベントはあまり見かけないですが、これはリアルタイムでinputの入力値を取得できるイベントです。何か入力する度に発火します。（記事最後に参考リンクあります）。
let value = $(this).val();で入力値を取得しています。val()はinputの入力値を取得するメソッドでしたね。inputイベントと合わせることでリアルタイムで入力された文字を取得しています。
.replaceは文字列を置換するメソッドです。/[０-９]/gは正規表現で、全角数字の０から９に対して処理です。その下の/[^0-9]/gは半角数字の0から9以外に対して処理です。先頭の^は正規表現では否定という意味を持ちます。
またreturn String.fromCharCode(s.charCodeAt(0) - 65248);は全角文字を半角文字に変換する処理です。こういう決まりきった書き方があるみたいですね。
全角英数の文字コードから65248個前が半角英数の文字コードとなっているため、このような書き方で全角数字を半角数字に自動で訂正することができるわけです。
一応補足しておくと、fromCharCode()はUnicodeの文字コードから指定された文字列を取得する関数です。例えばfromCharCode(65)と指定すると、Unicodeの文字コードの65に当たるAという文字列が取得できます。
また、charCodeAt()は文字列に対して指定されたインデックス番号のUnicodeの文字コードを取得する関数です。例えば'ACB'.charCodeAt(0)とすると、文字列のインデックス番号が0であるAという文字列のUnicodeの文字コードを取得するので、65が返ります。
正直この辺の細かいことは知らなくても本筋とはあまり関係ないので大丈夫な気がします。気になる人は各自調べてみてください。
最後にreplace()などで変換した文字（入力値）をinputにそのまま返してあげればokです。
まとめ
個数を選択する入力フォームなどは数字以外はそもそも入力できないようにしたいということがあると思うので、今回紹介した方法は結構使えると思います。
ただこれだけだと不親切なので「半角数字で入力してください」などの文言も添えるといいのではないかと思います。
参考記事
・inputに半角数字のみを許可
・inputイベント
＞＞inputイベントでフォーム入力値をリアルタイム取得できるよ。（あとjQuery例。）
・全角文字と半角文字の変換
