なぜ全角を半角に変換するのか?
入力フォームで全角文字が入力されると、データ処理でエラーが発生したり、意図しない結果になることがあります。特に数値や英数字を扱う場面では、全角を半角に変換することで、より正確なデータ処理が可能になります。
jQueryで全角を半角に変換するコード
$(document).ready(function() { $('#your_input_id').on('input', function() { // 入力された値を取得 const inputValue = $(this).val(); // 全角英数字を半角英数字に変換 const halfWidthValue = inputValue.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); // 変換後の値を元の入力欄に設定 $(this).val(halfWidthValue); }); });
コードの解説
-
$(document).ready(function() {})
ページが読み込まれた後に、この中のコードが実行されます。
-
$(‘#your_input_id’).on(‘input’, function() {})
IDが your_input_id の要素(通常は入力フォーム)で、何か入力された時に、この中の関数が実行されます。
-
const inputValue = $(this).val();
入力された値を取得し、inputValue 変数に格納します。
-
const halfWidthValue = inputValue.replace(/[A-Za-z0-9]/g, function(s) { … })
inputValue の中の全角英数字を正規表現を使って探し出し、function(s) { … } の部分で半角英数字に変換します。
s はマッチした1文字を表し、String.fromCharCode(s.charCodeAt(0) – 0xFEE0) で、その文字のコードポイントから 0xFEE0 を引くことで対応する半角文字に変換します。 -
$(this).val(halfWidthValue);
変換後の値 halfWidthValue を、元の入力フォームに設定します。
重要なポイント
- 正規表現 /[A-Za-z0-9]/g: 全角英数字を全てマッチさせるための正規表現です。
- String.fromCharCode(): 数字のコードポイントから文字に変換する関数です。
- charCodeAt(): 文字のコードポイントを取得する関数です。
まとめ
このコードを使うことで、入力フォームに全角英数字が入力された際に、自動的に半角に変換され、データの整合性を保つことができます。
コメント