【jQuery】郵便番号の入力で、ハイフン（-）を自動入力する方法
お問い合わせフォームで郵便番号を入力してもらう際、3桁目と4桁目の間で自動でハイフン（-）が入力されると親切だなと思ったことありませんか？
この機能はjQueryを使うと簡単に実現することが出来ます。
この記事では、郵便番号の入力の際に3桁目と4桁目の間で自動でハイフン（-）が入力する方法をご紹介したいと思います。
完成コード
まずは完成コードを見てみましょう。
HTMLはこちら。name属性はpostal-codeとします。
<input type="text" name="postal-code" placeholder="123-4567">jQueryのコードはこちら。
$(document).ready(function() {
$('input[name="postal-code"]').on('input', function() {
// 半角数値以外の入力を削除
var postal_val = $(this).val().replace(/\D/g, '');
// 7桁を超えた場合をその入力値を削除
if (postal_val.length > 7) {
postal_val = postal_val.substring(0, 7);
}
// 3桁目と4桁目の間にハイフン（-）を入れる
if (postal_val.length > 3) {
postal_val = postal_val.substring(0, 3) + '-' + postal_val.substring(3, 7);
}
// 入力した値をフィールドにセット
$(this).val(postal_val);
});
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
ここからはコードの解説です。このコードは以下のように動作します。
$('input[name="postal-code"]').on('input', function() { ... });name属性がpostal-codeのinputタグに入力、削除などがあった時に実行されます。
// 半角数値以外の入力を削除
var postal_val = $(this).val().replace(/\D/g, '');半角数値以外の文字が入力された際は自動でその文字を削除されます。
つまり、この入力フィールドは半角数値の入力のみが有効となります。
この段階では、ハイフン（-）も削除されます。
// 7桁を超えた場合をその入力値を削除
if (postal_val.length > 7) {
postal_val = postal_val.substring(0, 7);
}郵便番号は7桁と決まっているのでそれ以上の入力は不要です。
7桁以上の入力があった場合はその文字を削除します。
つまり、7桁以上は入力出来ないようになっています。
// 3桁目と4桁目の間にハイフン（-）を入れる
if (postal_val.length > 3) {
postal_val = postal_val.substring(0, 3) + '-' + postal_val.substring(3, 7);
}数値が3桁を超える場合、最初の3桁の後にハイフン（-）を自動入力し、その後の4桁を続けます。
これにより、郵便番号のフォーマット（123-4567）が作成されます。
まとめ
いかがでしょうか？
このコードを使うことで、ユーザーが郵便番号を入力する際に自動的に郵便番号のフォーマットに整えられ、ユーザーが「1234567」と入力すると「123-4567」と表示されるようになります。
これにより、ユーザーの入力ミスを減らし、郵便番号の一貫したフォーマットを確保することが出来ます。
