【jQuery】郵便番号入力フィールドにハイフンを自動挿入する方法

郵便番号の入力フィールドにハイフンを自動で挿入することで、ユーザーの入力ミスを減らし、入力の利便性を向上させることができます。この記事では、jQueryを使ってリアルタイムでハイフンを挿入する方法を紹介します。

HTMLファイルを準備する
JavaScriptファイルを作成する
まとめ

HTMLファイルを準備する

まず、HTMLファイルに郵便番号の入力フィールドを作成します。以下のコードを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>郵便番号の自動ハイフン挿入</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <label for="zipcode">郵便番号:</label>
    <input type="text" id="zipcode" maxlength="8" placeholder="例: 123-4567">
    <script src="script.js"></script>
</body>
</html>

JavaScriptファイルを作成する

次に、script.jsという名前のJavaScriptファイルを作成し、以下のスクリプトを追加します。このスクリプトは、郵便番号入力フィールドにリアルタイムでハイフンを挿入します。

$(document).ready(function() {
    $('#zipcode').on('input', function() {
        let input = $(this).val().replace(/[^0-9]/g, '');
        if (input.length > 3) {
            input = input.slice(0, 3) + '-' + input.slice(3);
        }
        $(this).val(input);
    });
});

$(document).ready(function() { … }); は、ドキュメントの読み込みが完了した後に関数を実行します。
$(‘#zipcode’).on(‘input’, function() { … }); は、郵便番号入力フィールドでの入力イベントを監視します。
let input = $(this).val().replace(/[^0-9]/g, ”); は、入力された文字列から数字以外の文字を削除します。
if (input.length > 3) { … } は、数字が4文字以上ある場合、3文字目の後にハイフンを挿入します。
$(this).val(input); は、フィールドの値を更新します。

まとめ

これで、郵便番号入力フィールドにハイフンを自動挿入する機能が実装されました。ユーザーが郵便番号を入力すると、ハイフンが自動的に追加されるため、入力の利便性が向上します。ぜひこの方法を試してみてください。