クリエイターブログ

郵便番号からの自動入力は「ajaxzip3」から「YubinBango」への乗り換えを

2022.10.20 Posted by

今までお問い合わせフォームなどで住所の入力欄を作る際、男は黙って「ajaxzip3」を使っていました。

 

ある日「市町村合併などがあるとどうなるのだろう?」という話になり、改めてajaxzip3のgithubを見たところ

 

「新規の設置にはyubinbangoライブラリの使用をオススメしています。」

 

という表記が。ajaxzip3の後継とのことです。

 

今回は「ajaxzip3」と比較しながら「YubinBango」ライブラリの設置方法について紹介します。

 

ちなみに、郵便番号の情報は日本郵便の情報を使用しているそうです。
市町村合併などがあった際、ajaxzip3は恐らく開発者の方による手動、YubinBangoは自動で情報の更新。かつ動作の高速化も行われているそうです。

 

ajaxzip3の設置方法

まずはJSを読み込み

郵便番号のinputタグのonKeyUp属性に「AjaxZip3.zip2addr(this,”,’都道府県のname値’,’住所のname値’);」を入れます。

簡単ですね。

 

YubinBangoの設置方法

まずはJSを読み込み

このようにHTMLを作ります。

市区町村も分ける場合、このように作ります。

 

ポイント

  1. formタグのクラスに “h-adr” を指定する。
  2. form内の “p-country-name” クラスの要素に “Japan” を指定する。
  3. 郵便番号のinputタグのクラスに “p-postal-code” を指定する。
  4. 住所を入力するinputタグのクラスに、都道府県(p-region)、市区町村(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) を指定する。

 

これらの要件を満たすと動作します。
新規の設置は「YubinBango」を使用。
後からの設置など、HTMLをがっつり改変できないときは「ajaxzip3」という感じでしょうか。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ