郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法
公開日：2018年08月16日
カテゴリー：JavaScript, 開発
「YubinBango」とは
登録フォームの住所を郵便番号を入力するだけで自動的に住所が登録してくれるJavascriptのライブラリです。
これを使えばユーザーが住所を入力する手間を省くことができる非常にありがたいライブラリです。
https://github.com/yubinbango/yubinbango
通常の使い方
デモ
郵便番号を入れるだけで住所が入力されます
〒
「YubinBango」の利用方法
指定のclass属性を設定するだけ、すぐに動かすことができます
- ライブラリを読み込む
- “h-adr”のclass属性をセットしたformやdivで囲む
- class属性に “p-country-name” をセットした非表示要素を配置する
- 郵便番号入力フォームのclass属性に “p-postal-code” をセットする
- 住所入力フォームのclass属性に “p-region”（都道府県）、”p-locality”(市区町村)、”p-street-address”(町域)、”p-extended-address”(それ以降の住所) をセットする
サンプルコード
|
1 2 3 4 5 6 7 |
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <div class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> 〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br> <input type="text" class="p-region"/><br> <input type="text" class="p-locality p-street-address p-extended-address"/><br> </div> |
都道府県コードでの使い方
valueに都道府県コード設定されたプルダウンも良く利用します。
その場合は、都道府県コードを受け取ります
デモ
プルダウンの都道府県が設定されます
〒
都道府県コードの利用方法
都道府県のselectボックスのclass属性を “p-region” から “p-region-id” に変更します
- ライブラリを読み込む
- “h-adr”のclass属性をセットしたformやdivで囲む
- class属性に “p-country-name” をセットした非表示要素を配置する
- 郵便番号入力フォームのclass属性に “p-postal-code” をセットする
- 【変更】都道府県のプルダウンのclass属性に “p-region-id（都道府県）” をセットする
- 住所入力フォームのclass属性に “p-locality”(市区町村)、”p-street-address”(町域)、”p-extended-address”(それ以降の住所) をセットする
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <div class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> 〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br> <select class="p-region-id"> <option value="">--</option> <option value="1">北海道</option> <option value="2">青森県</option> <option value="3">岩手県</option> <option value="4">宮城県</option> <option value="5">秋田県</option> <option value="6">山形県</option> <option value="7">福島県</option> <option value="8">茨城県</option> <option value="9">栃木県</option> <option value="10">群馬県</option> <option value="11">埼玉県</option> <option value="12">千葉県</option> <option value="13">東京都</option> <option value="14">神奈川県</option> <option value="15">新潟県</option> <option value="16">富山県</option> <option value="17">石川県</option> <option value="18">福井県</option> <option value="19">山梨県</option> <option value="20">長野県</option> <option value="21">岐阜県</option> <option value="22">静岡県</option> <option value="23">愛知県</option> <option value="24">三重県</option> <option value="25">滋賀県</option> <option value="26">京都府</option> <option value="27">大阪府</option> <option value="28">兵庫県</option> <option value="29">奈良県</option> <option value="30">和歌山県</option> <option value="31">鳥取県</option> <option value="32">島根県</option> <option value="33">岡山県</option> <option value="34">広島県</option> <option value="35">山口県</option> <option value="36">徳島県</option> <option value="37">香川県</option> <option value="38">愛媛県</option> <option value="39">高知県</option> <option value="40">福岡県</option> <option value="41">佐賀県</option> <option value="42">長崎県</option> <option value="43">熊本県</option> <option value="44">大分県</option> <option value="45">宮崎県</option> <option value="46">鹿児島県</option> <option value="47">沖縄県</option> </select><br> <input type="text" class="p-locality p-street-address p-extended-address"/><br> </div> |
最後に
「YubinBango」は非常に簡単便利で技術系の情報の数多くありますが、
都道府県コードで設定する方法はあまり見かけないことから今回の記事更新となりました。
開発者様に感謝するとともに、利用される方のお役に立てれば幸いです。
☆☆ウィズテクノロジーでは、大阪、東京を中心としたシステム開発を行っております
システムのご相談はもとより、一緒に働くエンジニアもお待ちしております。☆☆
