郵便番号から住所をフォームに自動入力するJS

お問い合わせフォームなどで郵便番号を入力すると自動的に住所を入力する代表的なJavaScriptをまとめてみました。

フォームの入力は、入力する側になると実は結構めんどうでストレスがかかります。

そのストレスを軽減するために入力作業は簡単であれば簡単であるほど良く、入力作業のユーザビリティを高めるとWeb閲覧者の離脱率が下がります。

設定はとても簡単なので、申し込みフォームなどを設置している場合は住所の自動入力を実装しましょう。

zip2addr
AjaxZip3
YubinBango
まとめ

zip2addr

Google日本語入力を利用して郵便番号から住所を補完して自動入力します。JQueryとJSのみで動作してメンテナンスフリーです。HTMLタグ内にインラインで挿入できるので手軽に実装できます。

URL：https://github.com/kotarok/jQuery.zip2addr

設置方法

上記のGitHubのページからzipファイルをダウンロードし、解凍してできたjquery.zip2addr.jsをjsフォルダ内などの任意の場所にアップロードします。

アップロードする前に、念のためにjquery.zip2addr.jsをテキストエディタなどで開き、5行目の
api: 'http://www.google.com/transliterate?langpair=ja-Hira|ja&jsonp=?',
を
api: 'https://www.google.com/transliterate?langpair=ja-Hira|ja&jsonp=?',
に変えておきましょう。
※上記の変更でAPI呼び出しURLを「http:」から「https:」に変更しています。
※変更しなくても大抵動きますが、非SSLでの通信を遮断する設定がある場合は「https:」に変更しないと動かないケースがあります。

JQueryとJSの読み込み

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zip2addr.js"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.zip2addr.js"></script>

HTML

<form>
郵便番号:
<input type="text" id="郵便番号" onKeyUp="$('#郵便番号').zip2addr('#住所');" ><br>
住所:
<input type="text" id="住所">
</form>

<form>

郵便番号:

住所:

</form>

郵便番号と住所の入力欄にそれぞれIDを割り当てて、「onKeyUp="$('#郵便番号').zip2addr('#住所');"」を郵便番号の<input>タグ内に挿入するだけで動きます。

デモ

See the Pen
jJbqgP by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

住所の都道府県を分けたい場合

郵便番号:
<input type="text" id="郵便番号" onKeyUp="$('#郵便番号').zip2addr({pref:'#都道府県',addr:'#住所'});" ><br>
都道府県:
<input type="text" id="都道府県"><br>
住所:
<input type="text" id="住所">

郵便番号:

都道府県:

住所:

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

郵便番号:
<input type="text" id="郵便番号1" size="3">-<input type="text" id="郵便番号2" onKeyUp="$('#郵便番号1').zip2addr({zip2:'#郵便番号2',pref:'#都道府県',addr:'#住所'});" size="4"><br>
都道府県:
<input type="text" id="都道府県"><br>
住所:
<input type="text" id="住所">

郵便番号:

都道府県:

住所:

AjaxZip3

郵便事業株式会社（旧郵政省）提供のデータを参照して郵便番号から住所を自動入力します。単体のJSのみで動作しますのでJQueryも不要です。

郵便番号から住所を自動入力した後に自動的にカーソルが住所入力欄に移動します。

URL：https://github.com/ajaxzip3/ajaxzip3.github.io

設置方法

JSの読み込み

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

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

HTML

郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','住所','住所');"><br>
住所:
<input type="text" name="住所">

郵便番号:

住所:

デモ

See the Pen
bZVwvY by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

住所の都道府県を分けたい場合

郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','住所');"><br>
都道府県:
<input type="text" name="都道府県"><br>
住所:
<input type="text" name="住所">

郵便番号:

都道府県:

住所:

住所の都道府県と市区町村、それ以外を分けたい場合

郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','市区町村','以降の住所');"><br>
都道府県:
<input type="text" name="都道府県"><br>
市区町村:
<input type="text" name="市区町村"><br>
以降の住所:
<input type="text" name="以降の住所">

郵便番号:

都道府県:

市区町村:

以降の住所:

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

郵便番号:
<input type="text" name="郵便番号1" size="3">-<input type="text" name="郵便番号2" onKeyUp="AjaxZip3.zip2addr('郵便番号1','郵便番号2','都道府県','市区町村','以降の住所');" size="4"><br>
都道府県:
<input type="text" name="都道府県"><br>
市区町村:
<input type="text" name="市区町村"><br>
以降の住所:
<input type="text" name="以降の住所">

郵便番号:

都道府県:

市区町村:

以降の住所:

YubinBango

AjaxZip3の後継ライブラリです。
単体のJSのみで動作し、JQueryが不要でHTMLタグ内にclassを指定するだけで動作します。

全角数字で入力された場合は半角数字に自動変換し、ハイフンが入力されても動作します。

住所の入力項目が「都道府県」「市区町村」「町・番地」「ビル等」など細かく分けられていても対応できます。

URL：https://github.com/yubinbango/yubinbango

設置方法

JSの読み込み

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

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

HTML

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:    
<input type="text" class="p-postal-code"><br>
住所:
<input type="text" class="p-region p-locality p-street-address p-extended-address" />
</form>

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号:

住所:

</form>

<form>タグ、<span>タグ、<input>タグにあらかじめ指定されたclass名を設定するだけで郵便番号からのフォーム自動入力が完了します。

クラス名	内容	HTMLタグ	備考
h-adr	必須項目	<form>	必ず設定する
p-country-name	国の指定	<span>	「display:none;」で非表示にして「Japan」を入力
p-postal-code	郵便番号	<input>	郵便番号を3桁+4桁にする場合は同じクラスの<input>タグを2回使う。
p-region	都道府県	<input>	都道府県をプルダウンにしている場合は<select>タグにこのクラスを設定する。
p-locality	市区町村	<input>
p-street-address	町・番地	<input>
p-extended-address	ビル・マンション棟	<input>

デモ

See the Pen
pYjEVO by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

郵便番号を3桁+4桁にしたい場合

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:    
<input type="text" class="p-postal-code" size="3">-<input type="text" class="p-postal-code" size="4"><br>
住所:
<input type="text" class="p-region p-locality p-street-address p-extended-address">
</form>

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号:

住所:

</form>

住所の都道府県を分けたい場合

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:    
<input type="text" class="p-postal-code"><br>
都道府県:
<input type="text" class="p-region" readonly><br>
住所:
<input type="text" class="p-locality p-street-address p-extended-address">
</form>

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号:

都道府県:

住所:

</form>

住所の都道府県と市区町村、それ以外をそれぞれ分けたい場合

<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
郵便番号:    
<input type="text" class="p-postal-code"><br>
都道府県:
<input type="text" class="p-region" readonly><br>
市区町村:
<input type="text" class="p-locality" readonly><br>
以降の住所
<input type="text" class="p-street-address"><br>
ビル・マンション等
<input type="text" class="p-extended-address">
</form>