フォーム入力の実装は奥が深いと思っているくらパパ（ @Cloud_san99）です。 今回はメールフォーム等の入力するフォームでよく見かける半角数字のみに変換する方法を紹介します。 今回紹介するソースコードは英字の全角・半角は削除し、全角数字は半角数字に変換させるので希望の値を入力させる時など実践でも役立つコードです。 ソースコードを紹介した後に詳細な解説もしていますので、なぜそうなるのか？を知りたい方は最後までチェックしてもらえれば幸いです。
もくじ
英数字入力で英字を削除し半角数字のみに変換するソースコード【jquery】
英数字入力で英字を削除し半角数字のみに変換するソースコードの解説
今回紹介する処理は以下の順番で処理しています。- #oneのフォームに入力された値を取得して変数input_textに代入
- 全角の数字のみを正規表現で抽出し、replaceで半角に変換し、変数input_textに上書き代入
- replaceで半角数字以外を削除
- 変数input_textに入っている値をvalで#oneの値を変更
let input_text = $('#one').val();.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 65248);
}) replaceメソッドとは
replace(‘第1引数’,’第2引数’);
第1引数を第2引数に変換するという意味になります。
第1引数を第2引数に変換するという意味になります。
MEMO
全角英数字から65248をひくことで半角英数字になります。.replace(/[^0-9]/g, '');【jquery】英数字入力で英字を削除し半角数字のみに変換する方法まとめ
この記事では【jquery】英数字入力で英字を削除し半角数字のみに変換する方法を詳しく解説してみました。 よくメールフォームなどで理想の値を入力してもらうために比較的頻繁に実装するんじゃないでしょうか。 今回のソースコードのポイントは下記の通りです。- 正規表現
- 全角英数字から65248をひくことで半角英数字になる
- replaceメソッド
- valメソッド
