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

2024.2.9

asami-furuta

郵便番号から住所を自動入力させたいとき、「ajaxzip3」というJavaScriptライブラリを使った実装方法をご紹介します。今回は都道府県をセレクトボックスにしましたが、自由入力でも同様に使用できます。

※現在は「YubinBango.js」という「ajaxzip3」の後継となるライブラリの使用が推奨されています。ajaxzip3を既に導入している場合以外はYubinBango.jsを使用してください。

INDEX

ajaxzip3を使って、郵便番号から住所を自動入力

デモはこちらです。

See the Pen 【ajaxzip3】郵便番号から住所を自動入力 by asamifuruta (@asamih5) on CodePen.

ライブラリの読み込み

まずは”ajaxzip3″のライブラリを読み込みます。HTMLのheadタグ内に以下を記入するだけです！

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

HTML

まずは好きなレイアウトに、HTMLコーディングを行います。inputタグ内にはname属性を設定しておきます。

次に郵便番号を入力するinputタグ内にonKeyUp属性を記入します。本記事では以下のように記入しています。カッコ内は先ほど指定したname属性です。

onKeyUp="AjaxZip3.zip2addr('zip01',','pref','addr');"

<form>
  <label for="postal-code">郵便番号</label>
  <input id="postal-code" type="text" placeholder="0000000（ハイフン不要）" name="zip01" maxlength="8" onKeyUp="AjaxZip3.zip2addr('zip01',,'pref','addr');" class="input_form">
  
  <label for="pref">都道府県</label>
  <input id="pref" name="pref" class="input_form prefectures">
  
  <label for="address">住所</label>
  <input id="address" type="text" name="addr" placeholder="〇〇市△△町4番地xxマンション101号室" class="input_form address">
</form>

ちなみに都道府県をセレクトボックスにしたい場合は、selectタグに同じようにname属性を設定するだけで実装できます。

<form>
  <label for="postal-code">郵便番号</label>
  <input id="postal-code" type="text" placeholder="0000000（ハイフン不要）" name="zip01" maxlength="8" onKeyUp="AjaxZip3.zip2addr('zip01',,'pref','addr');" class="input_form">
  
  <label for="pref">都道府県</label>
  <select id="prefectures" name="pref" class="input_form prefectures">
    <option hidden>選択してください</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="秋田県">秋田県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="東京都">東京都</option>
    <option value="神奈川県">神奈川県</option>
    <option value="新潟県">新潟県</option>
    <option value="富山県">富山県</option>
    <option value="石川県">石川県</option>
    <option value="福井県">福井県</option>
    <option value="山梨県">山梨県</option>
    <option value="長野県">長野県</option>
    <option value="岐阜県">岐阜県</option>
    <option value="静岡県">静岡県</option>
    <option value="愛知県">愛知県</option>
    <option value="三重県">三重県</option>
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
    <option value="大阪府">大阪府</option>
    <option value="兵庫県">兵庫県</option>
    <option value="奈良県">奈良県</option>
    <option value="和歌山県">和歌山県</option>
    <option value="鳥取県">鳥取県</option>
    <option value="島根県">島根県</option>
    <option value="岡山県">岡山県</option>
    <option value="広島県">広島県</option>
    <option value="山口県">山口県</option>
    <option value="徳島県">徳島県</option>
    <option value="香川県">香川県</option>
    <option value="愛媛県">愛媛県</option>
    <option value="高知県">高知県</option>
    <option value="福岡県">福岡県</option>
    <option value="佐賀県">佐賀県</option>
    <option value="長崎県">長崎県</option>
    <option value="熊本県">熊本県</option>
    <option value="大分県">大分県</option>
    <option value="宮崎県">宮崎県</option>
    <option value="鹿児島県">鹿児島県</option>
    <option value="沖縄県">沖縄県</option>
  </select>

  <label for="address">住所</label>
  <input id="address" type="text" name="addr" placeholder="〇〇市△△町4番地xxマンション101号室" class="input_form address">
</form>

CSS

こちらはレイアウトのための記述です。適宜変更してください。

label {
  font-size: 14px;
}
.input_form {
  display: block;
  border: solid 1px #ccc;
  padding: .5rem;
  margin-bottom: 1rem;
  width: 180px;
  box-sizing: border-box;
}

.input_form.address {
  width: 320px;
 }