【YubinBango.js】郵便番号自動入力ライブラリ
郵便番号自動入力フォームを作成します。
作成と言ってもライブラリがあるのでルールに従って使うだけなのでとても簡単です。
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 を導入してみてはいかがでしょうか?
最後までご覧いただきありがとうございました。