JSライブラリ「YubinBango」で郵便番号から住所の自動入力をしてみた

ECサイトやショッピングサイトを使っていると、お届け先を設定する時に郵便番号から自動的に住所が表示されるのをよくみるかと思います。

今回は入力フォームに郵便番号を入力すると、住所が自動的に表示されるJavaScriptライブラリ「yubinbango」について紹介です。

jsファイルのダウンロード

はじめにサイトからファイルをダウンロードしましょう。

GitHub - yubinbango/yubinbango

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

github.com

ダウンロードしたフォルダ内にはいくつかファイルがありますが、使用するファイルはyubinbango.jsになります。

入力フォームの作成

jsファイルを読み込み、以下のコードを使用すると、郵便番号を入力すると住所が自動的に表示される入力フォームを作成することができます。

郵便番号は全角、半角、ハイフンの有無に関係なく、入力することができます。

<form class="h-adr">
　　 <label for="zipcode">郵便番号</label>
    <span class="p-country-name" style="display:none;">Japan</span>
    <input type="text" class="p-postal-code" size="8" maxlength="8" placeholder="ここに郵便番号を入力します。" id="zipcode"><br><br>
　　 <label for="address">住所</label>
    <input type="text" class="p-region p-locality p-street-address p-extended-address" placeholder="郵便番号を入力すると、住所が表示されます。" id="address"><br>
</form>

　　 郵便番号 Japan

　　 住所

入力フォームのテキストボックスを分割

テキストボックスを分けて表示することもできます。

<form class="h-adr">
　　　 <label for="zipcode1">郵便番号</label>
      <span class="p-country-name" style="display:none;">Japan</span>
      <input type="text" class="p-postal-code" size="3" maxlength="3" placeholder="はじめの3桁の郵便番号を入力します。" id="zipcode1"><br><br>
      <input type="text" class="p-postal-code" size="4" maxlength="4" placeholder="続きの4桁の郵便番号を入力します。"><br><br>
　　　　<label for="address1">住所</label>
      <input type="text" class="p-region" readonly="" id="address1" placeholder="郵便番号を入力すると、住所が表示されます。"><br><br>
      <input type="text" class="p-locality" readonly=""><br><br>
      <input type="text" class="p-street-address"><br><br>
      <input type="text" class="p-extended-address">
    </form>

　　　 郵便番号 Japan



　　　　住所