【jQuery】郵便番号から住所を自動入力してくれるajaxzip3の使い方

2022.6.29

【jQuery】郵便番号から住所を自動入力してくれるajaxzip3の使い方

フォーム設置において、郵便番号を入力すると住所が自動で表示されることはユーザビリティの観点からもなくてはならない存在と言っても過言ではないと思います。

今回は、郵便番号を入力すると住所を自動入力してくれる『jaxzip3』の使い方をご紹介します。

ajaxzip3を読み込む

ajaxzip3のライブラリは下記よりダウンロードできます。

ajaxzip3/ajaxzip3.github.io

CDNでの記載でOKです。

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

フォームの記載方法（都道府県と以降の住所を分ける場合）

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

See the Pen <a href="https://codepen.io/Uchaaan/pen/qBoBoBM"> 【ajaxzip3】都道府県と以降の住所を分ける場合</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

フォームの記載方法（都道府県と以降の住所を分けない場合）

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

See the Pen <a href="https://codepen.io/Uchaaan/pen/dymymyw"> 【ajaxzip3】都道府県と以降の住所を分けない場合</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

フォームの記載方法（郵便番号を3桁-4桁で入力させる場合）

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

See the Pen <a href="https://codepen.io/Uchaaan/pen/yLKLKXP"> 【ajaxzip3】都道府県と以降の住所を分けない場合</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

フォームの記載方法（ボタンクリックで入力させる場合）

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

See the Pen <a href="https://codepen.io/Uchaaan/pen/jOzOzGL"> 【ajaxzip3】ボタンクリックで入力させる場合</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>) on <a href="https://codepen.io">CodePen</a>.

いかがだったでしょうか。
簡単に設置が出来て、いろいろなパターンに応用も可能で便利ですね。
フォームには欠かせない、郵便番号から住所を自動で入力できるjaxzip3のご紹介でした。