JavaScript

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

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

YubinBango

以下がソース元サイトです。
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>

郵便番号を入力するだけで住所を自動入力されるデモページ

郵便番号を入力するだけで住所を自動入力されるデモページ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。