お問い合わせフォームなどで郵便番号を入力すると自動的に住所を入力する代表的なJavaScriptをまとめてみました。
フォームの入力は、入力する側になると実は結構めんどうでストレスがかかります。
そのストレスを軽減するために入力作業は簡単であれば簡単であるほど良く、入力作業のユーザビリティを高めるとWeb閲覧者の離脱率が下がります。
設定はとても簡単なので、申し込みフォームなどを設置している場合は住所の自動入力を実装しましょう。
zip2addr
Google日本語入力を利用して郵便番号から住所を補完して自動入力します。JQueryとJSのみで動作してメンテナンスフリーです。HTMLタグ内にインラインで挿入できるので手軽に実装できます。
URL：https://github.com/kotarok/jQuery.zip2addr
設置方法
上記のGitHubのページからzipファイルをダウンロードし、解凍してできたjquery.zip2addr.jsをjsフォルダ内などの任意の場所にアップロードします。
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>HTML
<form>
郵便番号:
<input type="text" id="郵便番号" onKeyUp="$('#郵便番号').zip2addr('#住所');" ><br>
住所:
<input type="text" id="住所">
</form>郵便番号と住所の入力欄にそれぞれIDを割り当てて、「onKeyUp="$('#郵便番号').zip2addr('#住所');"」を郵便番号の<input>タグ内に挿入するだけで動きます。
デモ
See the Pen Untitled 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>HTML
郵便番号:
<input type="text" name="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','住所','住所');"><br>
住所:
<input type="text" name="住所">デモ
See the Pen Untitled 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>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><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 Untitled 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>住所の都道府県を分けたい場合
<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>
住所の都道府県と市区町村、それ以外をそれぞれ分けたい場合
<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>まとめ
手軽に郵便番号からの住所入力を実装するなら「zip2addr」か「AjaxZip3」
複雑なフォームをclass名だけで簡単に設定したいなら「YubinBango」
用途によって使い分けましょう。
