郵便番号から住所を自動入力してくれるJavaScriptライブラリ「Ajaxzip3」の使い方

2020/07/12 (更新日: 2022/05/25)

この記事の概要

Web制作者

郵便番号を入力すると自動的に住所を入力できる機能をつけたいけど、そんな簡単にできるものなの？

管理人

ご希望の機能、とあるJavaScriptライブラリで簡単に実装できますよ。詳しく紹介しますね。

本記事の内容

郵便番号から住所を自動入力させる方法（JavaScriptライブラリ「Ajaxzip3」使用）
（番外編）Ajaxzip3で都道府県自動入力をセレクトボックスにカスタムする方法

申し込みフォームで、郵便番号を入力すると住所を自動入力できる機能を見かけますよね？

この機能は大量の郵便番号と住所のデータが必要になり、実装が難しそうです。
しかし、JavaScriptライブラリ「Ajaxzip3」を使用することで郵便番号から住所の自動入力を簡単に実現することができます。

この記事では、JavaScriptライブラリ「Ajaxzip3」の使い方をご紹介します。

「Ajaxzip3」の導入手順

ここから、「Ajaxzip3」の導入手順についてご紹介します。

「郵便番号の入力欄が一つの場合と二つの場合」×「住所の入力欄が一つの場合と二つの場合」の計4パターンを実装します。

郵便番号入力パターン

郵便番号を一つの欄（7桁）、住所を一つの欄に自動入力
郵便番号を一つの欄（7桁）、住所を複数の欄に自動入力
郵便番号を二つの欄（3桁-4桁）、住所を一つの欄に自動入力
郵便番号を二つの欄（3桁-4桁）、住所を複数の欄に自動入力

【公式】Ajaxzip3

GitHub – ajaxzip3/ajaxzip3.github.io

ライブラリを読み込み

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

上記コードを<head>タグ内に記述します。

HTML/CSS/JavaScript

HTML、JavaScriptの記述ルール

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

上記のJavaScriptを、<input>のonKeyUpに記述します。
引数がそれぞれ割り当てられているので、引数を<input>のname属性と対応させます。

CSSは、各自最適なものを記述してください。

以下、各パターンのHTMLとイメージです。

郵便番号を一つの欄（7桁）、住所を一つの欄に自動入力

イメージ

HTML

〒<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"><br>
<input type="text" name="addr11" size="60">

キーボードを押して離した時に、住所の自動入力処理がお行われます。

住所の欄が1つなので、第2引数は空にします。第3、4引数は同じものaddr11を記述して一つの欄に住所を自動入力させます。

郵便番号を一つの欄（7桁）、住所を複数の欄に自動入力

イメージ

HTML

〒<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');"><br>
<input type="text" name="pref01" size="20"><br>
<input type="text" name="addr01" size="60">

第3、4引数を別の名前にして、それぞのname属性に対応した欄に住所が入力されるようになっています。

郵便番号を二つの欄（3桁-4桁）、住所を一つの欄に自動入力

イメージ

HTML

〒<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');"><br>
<input type="text" name="addr21" size="60">

郵便番号の入力欄を3桁と4桁の2つに分け入力させるようにしています。第1引数に3桁、第2引数に4桁にあたるname属性を割り当てています。

郵便番号を二つの欄（3桁-4桁）、住所を複数の欄に自動入力

イメージ

HTML

〒<input type="text" name="zip31" size="4" maxlength="3"> － <input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','strt31');"><br>
<input type="text" name="pref31" size="40"><br>
<input type="text" name="addr31" size="40"><br>
<input type="text" name="strt31" size="40">

（番外編）Ajaxzip3での都道府県自動入力をセレクトボックスにカスタムする方法

この記事の本題とは逸れますが、参考までに都道府県をテキスト形式ではなくセレクトボックスにカスタムする方法を紹介します。

都道府県がセレクトボックスで自動選択され、それ以降はテキストで自動入力されます。

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

都道府県をセレクトボックスにする場合も、記述ルールは変わりません。引数を自動入力したい入力タグのname属性と対応させます。

イメージ

HTML

〒<input type="text" name="zip31" size="4" maxlength="3"> － <input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref','addr1','addr2');"><br>
<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><br>
<input type="text" name="addr1" size="40"><br>
<input type="text" name="addr2" size="40">

通常、都道府県は<input type="text" name="pref" size="40">でテキスト形式で入力されるのですが、ここでは<select name="pref">でセレクトボックスと対応するようにしています。

<option>タグのvalueに都道府県名を設定すると、郵便番号入力時に都道府県をセレクトボックスから自動選択してくれます。

まとめ

Ajaxzip3の使い方のポイントを再度まとめます。

ポイント

Ajaxzip3をhead内で読み込む
郵便番号、住所の入力フォームをHTMLで設置する
onKeyUpにAjaxzipを動作させるjavascriptのフォマットを記述する

jsライブラリを読み込んで、HTMLをコピペするだけで住所入力欄のユーザービリティを向上させることができます。

管理人

ユーザビリティ向上のために住所の入力欄を設置したい時は、数分で導入できるのでぜひ使ってみてください。

Programming