JavaScript（脱jQuery）

郵便番号を入力したら自動で住所を表示するフォーム。「YubinBango.js」プラグイン

YubinBango.jsとは

YubinBango.jsは、郵便番号から住所を表示する機能を実装できるJavaScriptのライブラリです。

jQueryに依存していないため、jQueryが使用できない要件にも採用できます。

「ajaxzip3」との違い

「ajaxzip3」という「YubinBango.js」と類似のライブラリがありますが、こちらは同じ方が開発しています。

先に公開されたのが「ajaxzip3」で、「YubinBango.js」は後継ライブラリです。
Google Codeで公開されていた「ajaxzip3」ですが、Google Codeの廃止にともない、新しく「YubinBango.js」が開発されました。

公式ドキュメントでは、新しい「YubinBango.js」を使用する事を推奨しているため、既に「ajaxzip3」を導入済みでない場合は「YubinBango.js」を使用しましょう。

下記のライブラリを使用する

javascript
                  


//WordPressの場合はfunctions.phpに下記コードを記述することでライブラリを読み込みます。
wp_enqueue_script('yubinbango’', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true);

必要なclass

class
h-adr フォーム全体を
住所入力として認識させる

「yubinbango.js」が住所自動補完の対象として認識します。
p-country-name 国名指定

日本の場合は「Japan」と指定する。
表示を隠すためにstyle="display:none;"を使用。
p-postal-code 郵便番号入力欄

郵便番号から住所情報を取得します。
郵便番号の入力にはハイフン（-）を含めても対応しています。

                        
                          //入力フォームが1つの場合
                          

                          //上３桁、下４桁に分かれている場合
p-region 都道府県名

このクラスで郵便番号に基づいた都道府県の情報を自動入力する
p-locality 市町村区

郵便番号に基づいて、市区町村の情報を自動的に補完する
p-street-address 町域（町名や番地など）

詳細な住所情報を自動入力する
p-extended-address 以降の住所

郵便番号の入力フォームが1つの場合

・デモ

郵便番号の入力フォームが上３桁、下４桁に分かれている場合

・デモ

住所欄の入力フォームが1つの場合

・デモ

「都道府県」がドロップダウンメニューの場合

・デモ

ボタンを押すと住所が入力される場合

・デモ

住所入力フォームが複数ある場合

・デモ

郵便番号を入力したら自動で住所のフォームへフォーカスを移動させる

・デモ

スマホ入力時にキーボードを変更

・デモ

・郵便番号を入力するinputタグにinputmode属性を指定します。

・inputmode属性は、スマートフォンやタブレットでフォームを入力する際に表示されるキーを指定出来ます。