郵便番号を入力するだけで住所を自動入力する方法【yubinbango.js】｜DAD UNION

yubinbango.jsを使って、郵便番号を入力するだけで簡単に住所を自動入力する方法をご紹介します。

Contents

郵便番号を入力するだけで住所を自動入力するCSSの記述
郵便番号を入力するだけで簡単に住所を自動入力するyubinbango.jsファイル読み込み
郵便番号を入力するだけで簡単に住所を自動入力するHTMLの記述
郵便番号を入力するだけで住所を自動入力されるデモページ
ソース元：YubinBango

郵便番号を入力するだけで住所を自動入力するCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 18px;
}
h2{
  text-align: center;
  padding: 20px 0 0 0;
  font-size: 16px;
}
-->
</style>

郵便番号を入力するだけで簡単に住所を自動入力するyubinbango.jsファイル読み込み

※yubinbango.jsファイルを読み込むだけです。

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

郵便番号を入力するだけで簡単に住所を自動入力するHTMLの記述

※以下の条件を満たす必要があります。

formタグのclass指定の中に h-adr が含まれていること
form中で、国名(p-country-name) が Japan に指定されていること
郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること

<h1>郵便番号を入力するだけで住所を自動入力</h1>


<h2>郵便番号をハイフン無しで入力すると住所が自動入力されます</h2>
    <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>

<h2>郵便番号を入力すると都道府県、市区町村で分けて自動入力されます</h2>
    <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>