[yubinbango.js]1つのフォームに複数設置する方法

簡単。

これ。
基本形
複数設置
おまけ：自動フォーカスについて

これ。

GitHub - yubinbango/yubinbango

Contribute to yubinbango/yubinbango development by creating an account on GitHub.

自動入力後にフォーカス位置が変わらないこと以外は便利。

基本形

住所を複数入力するなんてことはめったにないだろうで、普通はこんな感じでやってると思う。

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

<form action="" class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    <input type="text" class="zip p-postal-code" inputmode="numeric" size="8" maxlength="8" placeholder="郵便番号">
    <input type="text" class="p-region" placeholder="都道府県">
    <input type="text" class="p-locality p-street-address" placeholder="市区町村・丁目番地">
    <input type="text" class="p-extended-address" placeholder="建物名">
    ︙
</form>

yubinbango.jsは結構柔軟で、カスタマイズしなくても複数設置ができる。

複数設置

こうなる。

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

<form action="">
    <div class="h-adr">
        <span class="p-country-name" style="display:none;">Japan</span>
        <input type="text" class="zip p-postal-code" inputmode="numeric" size="8" maxlength="8" placeholder="郵便番号">
        <input type="text" class="p-region" placeholder="都道府県">
        <input type="text" class="p-locality p-street-address" placeholder="市区町村・丁目番地">
        <input type="text" class="p-extended-address" placeholder="建物名">
    </div>
    <div class="h-adr">
        <span class="p-country-name" style="display:none;">Japan</span>
        <input type="text" class="zip p-postal-code" inputmode="numeric" size="8" maxlength="8" placeholder="郵便番号">
        <input type="text" class="p-region" placeholder="都道府県">
        <input type="text" class="p-locality p-street-address" placeholder="市区町村・丁目番地">
        <input type="text" class="p-extended-address" placeholder="建物名">
    </div>
    ︙
</form>

.h-adrで1セットになるっぽい。

でもって、.h-adrは<form>に付けなくても大丈夫だと分かる。

おまけ：自動フォーカスについて

yubinbango.js｜郵便番号を入力後、住所へ自動フォーカスしたい - Qiita

郵便番号から自動で住所補完するライブラリ「yubinbango」入力フォームで、郵便番号を入力すると、住所を自動補完してくれるライブラリに「yubinbango」があります。…

自分でjsを組むしかないみたいですね。

それはいいのだけど、今回みたいに複数設置の場合を考えたら同じ.h-adr内のやつを、って指定を入れておかきゃいけない。

パクリだしjQueryだし雑だけど、こんな感じ。

$(function(){
    $('.h-adr .p-postal-code').on('keyup',function(){
        if (this.value.toString().match(/^[0-9]{7}$/) || this.value.toString().match(/^\d{3}-?\d{4}$/)) {
            $(this).parents('.h-adr').find('.p-street-address').focus();
        }
    })
})

一応動く。