【HP制作】yubinbango.jsを使用して郵便番号補完

yubinbango.jsを使用して郵便番号補完を行う。
HP制作向けの記事。

手順

1.yubinbango.jsを読み込む
2.h-adrのクラス属性を持つ要素で囲む
3.以下のクラスを持つinput要素を配置する

  • 郵便番号 p-postal-code
  • 都道府県 p-region-id
  • 市区町村 p-locality
  • 町域 p-street-address
  • それ以降の住所 p-extended-address
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<div class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    <input type="text" class="p-postal-code" size="8" maxlength="8" placeholder="〒">
    <select class="p-region-id">
        <option value="" disabled selected>--</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select>
    <input type="text" class="p-locality"/>
    <input type="text" class="p-street-address"/>
    <input type="text" class="p-extended-address"/>
</div>

input要素に複数のclassを持つことも可能

<input type="text" class="p-locality"/>
<input type="text" class="p-street-address p-extended-address"/>

都道府県もセレクトボックスではなくinput要素に置き換えても大丈夫。

以前はAjaxZipなんかを使ってやっていた人が多いと思います。ここのところjQueryは使用しない風潮も強くなってきたので
jQueryを使わずにやりたい、でもnpm入れずにかん簡単に処理したい。そんなときなんかにyubinbango.jsはシンプルで良いかもしれないです

関連記事