【jQuery】郵便番号入力フィールドにハイフンを自動挿入する完全ガイド｜住所自動入力・バリデーション・ペースト対応まで

郵便番号入力フォームで「123-4567」のようにハイフンを自動挿入すると、ユーザーの入力ミスを減らし、フォームの使いやすさが向上します。この記事ではハイフン自動挿入・住所自動入力連携・バリデーション・ペースト対応まで解説します。

input[type=text]でカスタム実装 vs ライブラリ

新規プロジェクトでは依存ゼロのカスタム実装か、活発にメンテされているIMask.jsを推奨します。

ハイフン自動挿入の基本実装

<input type="text" id="zip-input" placeholder="例: 123-4567"
       maxlength="8" inputmode="numeric">

$(function () {
  $('#zip-input').on('input', function () {
    // 数字以外を除去し、最大7桁
    var digits    = $(this).val().replace(/[^0-9]/g, '').slice(0, 7);
    // 3桁後にハイフンを挿入
    var formatted = digits.replace(/^(\d{3})(\d)/, '$1-$2');
    $(this).val(formatted);
  });
});

バックスペース対応（削除時にハイフンも自動削除）

バックスペースでハイフン直後の数字を削除した場合、ハイフンも一緒に削除する処理です。日付入力のスラッシュ自動挿入と同じパターンです。

$(function () {
  var prevVal = '';

  $('#zip-input').on('keydown', function () {
    prevVal = $(this).val();
  });

  $('#zip-input').on('input', function () {
    var val    = $(this).val();
    var digits = val.replace(/[^0-9]/g, '');

    // 削除時、前の末尾文字がハイフンなら数字も1つ削除
    var isDeleting = val.length < prevVal.length;
    if (isDeleting && prevVal.slice(-1) === '-') {
      digits = digits.slice(0, -1);
    }

    var formatted = digits.slice(0, 7).replace(/^(\d{3})(\d)/, '$1-$2');
    $(this).val(formatted);
    prevVal = formatted;
  });
});

zipcloud APIで郵便番号から住所を自動入力する

7桁入力完了時にzipcloud（無料API）を呼び出して住所を自動補完するパターンです。

<input type="text" id="zip-input" placeholder="123-4567" maxlength="8">
<button id="zip-btn">住所検索</button>
<p id="zip-error" style="color:red"></p>
<input type="text" id="pref" placeholder="都道府県">
<input type="text" id="city" placeholder="市区町村">
<input type="text" id="addr" placeholder="町域">

function searchZip(zip) {
  var digits = zip.replace(/-/g, '');
  if (digits.length !== 7) return;

  $.getJSON('https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + digits, function (data) {
    if (data.results) {
      var r = data.results[0];
      $('#pref').val(r.address1);
      $('#city').val(r.address2);
      $('#addr').val(r.address3);
      $('#zip-error').text('');
    } else {
      $('#zip-error').text('該当する住所が見つかりません');
    }
  }).fail(function () {
    $('#zip-error').text('住所の取得に失敗しました');
  });
}

$(function () {
  // 7桁入力完了で自動検索
  $('#zip-input').on('input', function () {
    var val = $(this).val();
    if (val.replace(/-/g, '').length === 7) {
      searchZip(val);
    }
  });

  // 検索ボタン
  $('#zip-btn').on('click', function () {
    searchZip($('#zip-input').val());
  });
});

郵便番号バリデーション

function isValidZip(str) {
  // NNN-NNNN 形式チェック
  return /^\d{3}-\d{4}$/.test(str);
}

$(function () {
  $('form').on('submit', function (e) {
    var val = $('#zip-input').val();
    if (!isValidZip(val)) {
      e.preventDefault();
      $('#zip-error').text('郵便番号を正しく入力してください（例: 123-4567）');
    } else {
      $('#zip-error').text('');
    }
  });

  // 入力完了（8文字）でリアルタイムバリデーション
  $('#zip-input').on('input', function () {
    var val = $(this).val();
    if (val.length === 8) {
      var ok = isValidZip(val);
      $('#zip-error').text(ok ? '' : '正しい郵便番号を入力してください');
    } else {
      $('#zip-error').text('');
    }
  });
});

ペースト対応・ハイフンなし7桁の変換

input イベントはペーストでも発火するため、基本の実装でペーストも動作します。ただし「1234567」のようにハイフンなし7桁をペーストした場合も自動変換されます。

// ハイフンなし7桁 → NNN-NNNN に変換（ページ読み込み時の初期値にも使える）
function formatZip(val) {
  var digits = val.replace(/[^0-9]/g, '').slice(0, 7);
  return digits.replace(/^(\d{3})(\d)/, '$1-$2');
}

$(function () {
  // Ajaxやサーバーから取得した初期値を変換してセット
  var savedZip = '1234567'; // 例: DBから取得した値
  $('#zip-input').val(formatZip(savedZip)); // → '123-4567'

  // inputイベントで自動フォーマット（ペースト時も発火）
  $('#zip-input').on('input', function () {
    $(this).val(formatZip($(this).val()));
  });
});

まとめ

郵便番号入力フィールドへのハイフン自動挿入の実装ポイントをまとめます。

• 基本: 数字7桁を取得 → 3桁後にハイフンを挿入（maxlength="8"）
• バックスペース: 削除時に前の末尾がハイフンなら数字も1つ削除
• 住所自動入力: 7桁完了でzipcloud APIを呼び出し（無料）
• バリデーション: /^\d{3}-\d{4}$/ で形式チェック
• 初期値変換: formatZip() でハイフンなし7桁を変換

関連記事: 日付入力にスラッシュを自動挿入する方法 / 時間入力にコロンを自動挿入する方法 / フォームバリデーション完全ガイド

よくある質問（FAQ）