郵便番号を入力すると住所を自動入力するライブラリ「YubinBango」

郵便番号を入力すると自動で住所が入力されるライブラリ。

使い方は、classを指定するだけ。

入力は、全角半角数字に対応、ハイフン有り無しに対応。

GitHubリポジトリ

 

 

ライブラリの読み込み

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

 

formタグにh-adrクラスを指定

<form class="h-adr">

</form>

 

国名を「Japan」に指定

p-country-name に japan を設定する

<span class="p-country-name" style="display:none;">Japan</span>

<input type="hidden" class="p-country-name" value="Japan">

 

 郵便番号や住所のinputにクラス指定

 inputタグにそれぞれclassを指定する。

 

class名	項目
p-region	都道府県名
p-locality	市町村区
p-street-address	町域
p-extended-address	以降の住所

 

郵便番号入力欄１つの例

<form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  郵便番号：<input type="text" class="p-postal-code" size="7" maxlength="8"><br>
  都道府県：<input type="text" class="p-region" /><br>
  地区町村：<input type="text" class="p-locality" /><br>
  町名番地：<input type="text" class="p-street-address" /><br>
  　　住所：<input type="text" class="p-extended-address" />
</form>

 

郵便番号入力欄2つの例

<form class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  郵便番号：<input type="text" class="p-postal-code" size="3" maxlength="3">-
  <input type="text" class="p-postal-code" size="4" maxlength="4"><br>
  都道府県：<input type="text" class="p-region" /><br>
  地区町村：<input type="text" class="p-locality" /><br>
  町名番地：<input type="text" class="p-street-address" /><br>
  　　住所：<input type="text" class="p-extended-address" />
</form>