郵便番号から住所をフォームに自動入力するJS

郵便番号から住所をフォームに自動入力するJS WEBデザイン

お問い合わせフォームなどで郵便番号を入力すると自動的に住所を入力する代表的なJavaScriptをまとめてみました。

フォームの入力は、入力する側になると実は結構めんどうでストレスがかかります。

そのストレスを軽減するために入力作業は簡単であれば簡単であるほど良く、入力作業のユーザビリティを高めるとWeb閲覧者の離脱率が下がります。

設定はとても簡単なので、申し込みフォームなどを設置している場合は住所の自動入力を実装しましょう。

スポンサーリンク

zip2addr

Google日本語入力を利用して郵便番号から住所を補完して自動入力します。JQueryとJSのみで動作してメンテナンスフリーです。HTMLタグ内にインラインで挿入できるので手軽に実装できます。

URL:https://github.com/kotarok/jQuery.zip2addr

設置方法

上記のGitHubのページからzipファイルをダウンロードし、解凍してできたjquery.zip2addr.jsをjsフォルダ内などの任意の場所にアップロードします。

アップロードする前に、念のためにjquery.zip2addr.jsをテキストエディタなどで開き、5行目の
api: 'http://www.google.com/transliterate?langpair=ja-Hira|ja&jsonp=?',

api: 'https://www.google.com/transliterate?langpair=ja-Hira|ja&jsonp=?',
に変えておきましょう。
※上記の変更でAPI呼び出しURLを「http:」から「https:」に変更しています。
※変更しなくても大抵動きますが、非SSLでの通信を遮断する設定がある場合は「https:」に変更しないと動かないケースがあります。

JQueryとJSの読み込み

HTML

郵便番号と住所の入力欄にそれぞれIDを割り当てて、「onKeyUp="$('#郵便番号').zip2addr('#住所');"」を郵便番号の<input>タグ内に挿入するだけで動きます。

デモ

See the Pen
jJbqgP
by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

住所の都道府県を分けたい場合

郵便番号を3桁と4桁に分けたい場合

スポンサーリンク

AjaxZip3

郵便事業株式会社(旧郵政省)提供のデータを参照して郵便番号から住所を自動入力します。単体のJSのみで動作しますのでJQueryも不要です。

郵便番号から住所を自動入力した後に自動的にカーソルが住所入力欄に移動します。

URL:https://github.com/ajaxzip3/ajaxzip3.github.io

設置方法

JSの読み込み

HTML

デモ

See the Pen
bZVwvY
by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

住所の都道府県を分けたい場合

住所の都道府県と市区町村、それ以外を分けたい場合

郵便番号を3桁と4桁に分けたい場合

スポンサーリンク

YubinBango

AjaxZip3の後継ライブラリです。
単体のJSのみで動作し、JQueryが不要でHTMLタグ内にclassを指定するだけで動作します。

全角数字で入力された場合は半角数字に自動変換し、ハイフンが入力されても動作します。

住所の入力項目が「都道府県」「市区町村」「町・番地」「ビル等」など細かく分けられていても対応できます。

URL:https://github.com/yubinbango/yubinbango

設置方法

JSの読み込み

HTML

<form>タグ、<span>タグ、<input>タグにあらかじめ指定されたclass名を設定するだけで郵便番号からのフォーム自動入力が完了します。

クラス名 内容 HTMLタグ 備考
h-adr 必須項目 <form> 必ず設定する
p-country-name 国の指定 <span> 「display:none;」で非表示にして「Japan」を入力
p-postal-code 郵便番号 <input> 郵便番号を3桁+4桁にする場合は同じクラスの<input>タグを2回使う。
p-region 都道府県 <input> 都道府県をプルダウンにしている場合は<select>タグにこのクラスを設定する。
p-locality 市区町村 <input>
p-street-address 町・番地 <input>
p-extended-address ビル・マンション棟 <input>

デモ

See the Pen
pYjEVO
by Ketsunosuke (@onoredekaiketsu)
on CodePen.

カスタマイズ例

郵便番号を3桁+4桁にしたい場合

住所の都道府県を分けたい場合

住所の都道府県と市区町村、それ以外をそれぞれ分けたい場合

スポンサーリンク

まとめ

手軽に郵便番号からの住所入力を実装するなら「zip2addr」か「AjaxZip3」

複雑なフォームをclass名だけで簡単に設定したいなら「YubinBango」

用途によって使い分けましょう。

WEBデザイン
スポンサーリンク
スポンサーリンク
Ketsunosukeをフォローする
己で解決!泣かぬなら己で鳴こうホトトギス