課題解決
INSIGHT
情報・インサイト
郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法
2018.08.16
「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”(それ以降の住所) をセットする
サンプルコード
〒
都道府県コードでの使い方
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”(それ以降の住所) をセットする
サンプルコード
〒
最後に
「YubinBango」は非常に簡単便利で技術系の情報の数多くありますが、
都道府県コードで設定する方法はあまり見かけないことから今回の記事更新となりました。
開発者様に感謝するとともに、利用される方のお役に立てれば幸いです。
☆☆ウィズテクノロジーでは、大阪、東京を中心としたシステム開発を行っております
システムのご相談はもとより、一緒に働くエンジニアもお待ちしております。☆☆
