申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog 【YubinBango.js】郵便番号自動入力ライブラリ

【YubinBango.js】郵便番号自動入力ライブラリ

郵便番号自動入力フォームを作成します。

作成と言ってもライブラリがあるのでルールに従って使うだけなのでとても簡単です。

目次

  1. YubinBango.js ライブラリの読み込み
  2. 郵便番号1枠、住所1枠のフォーム
  3. 郵便番号2枠、住所4枠のフォーム
  4. まとめ

YubinBango.js ライブラリの読み込み

まずはライブラリの読み込みです。1行書くだけです。

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

YubinBangoについて詳しく知りたい方はGitHub – yubinbango/yubinbangoでご確認ください。

クラス名等にはルールがありますので、勝手に変えてしまうと正常に動かなくなる可能性があります。ご注意ください。

郵便番号1枠、住所1枠のフォーム



<form 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 p-locality p-street-address p-extended-address" /><br>
</form>
.p-postal-code {
  margin-left: 5px;
}

.p-region {
  margin-top: 10px;
}

郵便番号2枠、住所4枠のフォーム





<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" readonly /><br>
  <input type="text" class="p-locality" readonly /><br>
  <input type="text" class="p-street-address" /><br>
  <input type="text" class="p-extended-address" />
</form>
.p-postal-code {
  margin-left: 5px;
}

.p-region, .p-locality, .p-street-address, .p-extended-address {
  margin-top: 10px;
}

まとめ

いかがでしたか?

郵便番号の自動入力機能があると、とても便利ですよね。

逆にないと、あーめんどくさいと少し思ってしまいます。

ユーザーの負担にならないためにも、郵便番号の自動入力ライブラリ YubinBango.js を導入してみてはいかがでしょうか?

最後までご覧いただきありがとうございました。