【JavaScript】ajaxzip3（郵便番号→住所自動入力）

★プログラミング ・JavaScript

ajaxzip3とは

郵便番号を打つと、住所を自動入力するJavaScriptライブラリ

使い方

パターン１．リンクを読み込んで使う

DL不要。オンラインでのみ使用可能

<body>
  <script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
  …

</body>
パターン２．ファイルをダウンロードして使う

オフラインでも使用可能。
GitHub - ajaxzip3/ajaxzip3.github.io

使用例

※自動入力先(都道府県等)はname指定しなければいけない

パターン１


AjaxZip3.zip2addr( '(in)〒上3桁', '(in)〒下4桁', '(out)都道府県', '(out)市区町村', '(out)丁目番地' );

<div>
  <div>〒<input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr(this, '', 'pref', 'city', 'town' );"></div>
  <div>都道府県<input type="text" name="pref"></div>
  <div>市区町村<input type="text" name="city"></div>
  <div>町名番地<input type="text" name="town"></div>
</div>
パターン２


AjaxZip3.zip2addr( '(in)〒上3桁', '(in)〒下4桁', '(out)都道府県', '(out)市区町村', '(out)丁目番地' );

<div>
  <div>〒<input type="text" name="zip1">-<input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip01', this, 'pref', 'pref' );"></div>
  <div>住所<input type="text" name="pref"></div>
</div>
パターン３

<div>
  <div>〒<input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr( this, '', 'pref', 'address');"></div>
  <div>都道府県
          <select name="pref">
            <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>
            <option value="沖縄県">沖縄県</option>
        </select></div>
  <div>市区町村番地<input type="text" name="address"></div>
</div>

javaScriptで動かす方法

<div>
  <div>〒<input type="text" name="zip"></div>
  <div>都道府県<input type="text" name="pref"></div>
  <div>市区町村<input type="text" name="city"></div>
</div>

<script>
  // 郵便番号を変更したら
  $("[name=zip]").on('change', function() {
    // 郵便番号が未入力なら実行しない
    if (!$(this).val()){
      return;
    }
    // 住所取得
    AjaxZip3.zip2addr('zip', '', 'pref', 'city');
  });
</script>