ウェブデザイナーの毎日のお仕事のメモ

作成日:2020.11.13  最終更新日:2021.01.04

js / jQuery

フォームの郵便番号を入力して住所を自動入力させるyubinbango.jsの使い方

フォーム作成時、郵便番号を入力すると住所を途中まで自動入力してくれるjsプラグインの使い方のメモです。

yubinbango.jsの使い方手順

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

yubinbango.jsのページ (Githubのページ)にアクセスしします。
緑色のcodeボタンを押し、Download Zipボタンを押したら、ダウンロードが始まります。

②必要なファイルを任意のフォルダに設置する

ダウンロードしたファイルは以下のような構成になっています。

必要なのは、

  • yubinbango.js


の1つのファイルですので、任意のフォルダこれらのファイルを設置してください。

③ファイルを読み込む

※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。

<script src="yubinbango.js"></script>

④HTMLに必要なクラスを書く

こちらはGitHubで説明されているコードそのままですが、これが、基本設定の書き方で、たったこれだけでOKです。簡単ですね。

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

実際に以下がそのままコードをコピペしたものです。郵便番号を入れてみてください。

サンプル

郵便番号の間に、『-』を入れても正しく認識してくれます。



yubinbango.jsのもっと便利な使い方

郵便番号の入力欄を分けることができる

郵便番号の入力欄を3桁、4桁の入力欄に分けることができます。

<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 p-locality p-street-address p-extended-address" /><br>
</form>

以下、サンプルです。

サンプル


住所の欄を分けることができる

住所が自動入力される欄も分けることができます。
分けることができる単位は、
p-region p-locality p-street-address p-extended-address
の4つで、inputタグにクラスをつけることで、それぞれ表示の出し方を変えることができます。

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

以下、サンプルです。

サンプル





とても簡単に使えて、すごく便利でありがたいプラグインですので、色々使う機会も多いかと思います。

最新記事