Webサイトのフォーム入力をするとき、郵便番号だけ入れてボタンを押せば該当する住所を表示してくれるやつがあるととっても便利ですよね。
そんな便利なやつを実現してくれるjQueryプラグインを紹介いたします。
jquery.jpostal.jsを使ってフォームのユーザビリティを上げよう！
jquery.jpostal.jsファイルはこちらのページからダウンロードできます。
開発者さんのサイトでもソースを公開しているそうなので、そちらにファイルを読み込んでもいいよ！ということが書かれていてとっても親切ですね。
そんなわけでまずは使用するjsファイルを読み込みましょう。事前にjQuery自体を読み込んでおくのも忘れずに。
1 | <script type="text/javascript" src="jquery.jpostal.js"></script> |
そしてHTMLやjQueryはこんなふうに書いておきます。CodePenを設置しておくので興味のあるかたはソースをご確認ください。
プラグインの詳しい使い方はGithubにあるREADME.txtを読んでいただければと思います。
See the Pen oeZpKz by Daisuke Koshimizu (@dkossy) on CodePen.
郵便番号の入力フォームや住所表示するフォームの対応は柔軟に行えまして、例えば郵便番号を1箇所だけに入力させたい場合は、jQueryの引数を次のように書いて指定したIDで入力フォームを置いてあげればOKです。
1 2 3 | postcode : [ '#postcode' ] |
上のCodePenの例では住所の表示はフォームを3つに分けて行っていますが、これも1つにまとめたければjQueryの引数を次のように変更して指定したIDのフォームを設置してあげてください。
1 2 3 | address : { '#address' : '%3%4%5', } |
ここら辺の用法について詳しくはプラグインのREADME.txtをご覧ください。
jquery.jpostal.jsは扱いやすくてとってもおすすめです！それではまた！
売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。
