郵便番号を入力すると住所を自動で入力してくれる「ajaxzip3」ライブラリの利用方法
お問い合わせフォームのようなページで郵便番号及び住所欄がある場合、ユーザーが郵便番号を入力すると自動で住所欄も入力される機能を「ajaxzip3」ライブラリで実装することが多い。ただ、本サイトに実装方法をメモしておらず毎回過去に実装したソースコードを探し出すという無駄な作業をしていたのでこの機会にメモしておく。
サンプル
https://taitan916.info/sample/ajaxzip3/
フォームによっては郵便番号欄を分けたり、都道府県と住所を分けたりと様々なパターンがあるので、使いそうな4パターンを上記で試すことができる筈。
ajaxzip3
公式サイト
GitHub
https://github.com/ajaxzip3/ajaxzip3.github.io
CDN
CDNで使う場合は以下を記述する。
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
実装方法
ソースコード
<div class="contents"> <div class="title">郵便番号入力欄が1つ&都道府県と住所別の場合</div> <div> 郵便番号 <input type="text" name="zip_1" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref_1','addr_1');"> </div> <div> 都道府県 <input type="text" name="pref_1"> </div> <div> 住所 <input type="text" name="addr_1"> </div> </div> <div class="contents"> <div class="title">郵便番号入力欄が1つ&都道府県と住所分けない場合</div> <div> 郵便番号 <input type="text" name="zip_2" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr_2','addr_2');"> </div> <div> 住所 <input type="text" name="addr_2"> </div> </div> <div class="contents"> <div class="title">郵便番号入力欄が2つ&都道府県と住所別の場合</div> <div> 郵便番号 <input type="text" name="zip_3_1" size="4" maxlength="3"> - <input type="text" name="zip_3_2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip_3_1','zip_3_2','pref_3','addr_3');"> </div> <div> 都道府県 <input type="text" name="pref_3"> </div> <div> 住所 <input type="text" name="addr_3"> </div> </div> <div class="contents"> <div class="title">郵便番号入力欄が2つ&都道府県と住所分けない場合</div> <div> 郵便番号 <input type="text" name="zip_4_1" size="4" maxlength="3"> - <input type="text" name="zip_4_2" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip_4_1','zip_4_2','addr_4','addr_4');"> </div> <div> 住所 <input type="text" name="addr_4"> </div> </div> <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
関連記事
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...
-
-
JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて
jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...
-
-
jQueryにて指定した要素を検索条件から除外するnot()の利用方法
あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法
Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...