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

ajaxzip3を読み込む

ダウンロードする場合

https://github.com/ajaxzip3/ajaxzip3.github.ioから、【ajaxzip3.js】というファイルをダウンロードして設置します。

<script type="text/javascript" src="js/ajaxzip3.js"></script>

CDNを使用する場合

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

jQueryも使用する場合

入力後のフォーカスする場所を変更するのに、jQueryを使用する場合はjQueryも読込みます。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"</script>

郵便番号と住所のみ

<form>
  <label>郵便番号(ハイフンもOK)</label>
  <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr01','addr01');">
  <label>都道府県と以降の住所</label>
  <input type="text" name="addr01" size="40">
</form>
デモ

都道府県とそれ以降に分ける場合

<form>
  <label>郵便番号(ハイフンもOK)</label>
  <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
  <label>都道府県</label>
  <input type="text" name="pref01" size="20">
  <label>以降の住所</label>
  <input type="text" name="addr01" size="40">
</form>

デモ

都道府県・市区町村・それ以降に分ける場合

<form>
  <label>郵便番号(ハイフンもOK)</label>
  <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr('zip01','','pref01','addr01','strt01');">
  <label>都道府県</label>
  <input type="text" name="pref01" size="20">
  <label>市区町村</label>
  <input type="text" name="addr01" size="20">
  <label>以降の住所</label>
  <input type="text" name="strt01" size="40">
</form>
デモ

郵便番号を3桁と4桁に分ける場合

<form>
  <label>郵便番号(3桁と4桁)</label>
  <input type="text" name="zip01" size="4" maxlength="3">
  <input type="text" name="zip02" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip01','zip02','addr01','addr01');">
  <label>住所</label>
  <input type="text" name="addr01" size="40">
</form>
デモ

フォーカスを変える

zip2addrの第7引数に自動フォーカスするためのフラグがあるようです。第7引数をfalseに設定すると、自動フォーカス機能が切れます。

AjaxZip3.zip2addr(this,'','pref01','addr01', '', '', false);

jQueryで記述する場合

onSuccess(住所取得に成功した時)

AjaxZip3.onSuccess = function() {
  $('input[name=banchi]').focus();
};

onFailure(住所取得に失敗した時)

AjaxZip3.onFailure = function() {
  alert('郵便番号に該当する住所が見つかりません');
};