Enter a Postal Code to Auto-fill Address【yubinbango.js】

This article introduces how to easily auto-fill an address just by entering a postal code using yubinbango.js.

CSS for Auto-filling Address by Entering Postal Code

*Please modify as needed.

<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>

Load yubinbango.js File to Easily Auto-fill Address by Entering Postal Code

*Simply load the yubinbango.js file.

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

HTML Markup for Auto-filling Address by Entering Postal Code

*The following conditions must be met:

• The form tag must include h-adr in its class attribute.
• Within the form, p-country-name must specify “Japan”.
• The postal code input field must include p-postal-code in its class attribute.
• The address input fields must include p-region for prefecture, p-locality for city, p-street-address for street, and p-extended-address for extended address.

<h1>Auto-fill Address Just by Entering Postal Code</h1>

<h2>Enter the postal code without a hyphen to auto-fill the address</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>Auto-fill Prefecture, City, and More by Entering Postal Code</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>

Demo Page: Auto-fill Address by Entering Postal Code

Demo Page: Auto-fill Address by Entering Postal Code

Source: YubinBango

Here is the source:
YubinBango

　

*Please use it at your own risk if you reuse it.
Do not reuse the Google Analytics tag inside the head tag of the demo page.