【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);
    });
});