ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

郵便番号を入力すれば自動で住所を出してくれるjQueryプラグイン jquery.jpostal.js

| カテゴリー : JavaScript

Webサイトのフォーム入力をするとき、郵便番号だけ入れてボタンを押せば該当する住所を表示してくれるやつがあるととっても便利ですよね。

そんな便利なやつを実現してくれるjQueryプラグインを紹介いたします。

jquery.jpostal.jsを使ってフォームのユーザビリティを上げよう!

jquery.jpostal.jsファイルはこちらのページからダウンロードできます。

開発者さんのサイトでもソースを公開しているそうなので、そちらにファイルを読み込んでもいいよ!ということが書かれていてとっても親切ですね。

そんなわけでまずは使用するjsファイルを読み込みましょう。事前にjQuery自体を読み込んでおくのも忘れずに。

そしてHTMLやjQueryはこんなふうに書いておきます。CodePenを設置しておくので興味のあるかたはソースをご確認ください。

プラグインの詳しい使い方はGithubにあるREADME.txtを読んでいただければと思います。

See the Pen oeZpKz by Daisuke Koshimizu (@dkossy) on CodePen.

郵便番号の入力フォームや住所表示するフォームの対応は柔軟に行えまして、例えば郵便番号を1箇所だけに入力させたい場合は、jQueryの引数を次のように書いて指定したIDで入力フォームを置いてあげればOKです。

上のCodePenの例では住所の表示はフォームを3つに分けて行っていますが、これも1つにまとめたければjQueryの引数を次のように変更して指定したIDのフォームを設置してあげてください。

ここら辺の用法について詳しくはプラグインのREADME.txtをご覧ください。

jquery.jpostal.jsは扱いやすくてとってもおすすめです!それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。