にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:22.

郵便番号の入力で住所を自動補完する仕組みを個人サイトにも付ける方法

郵便番号からの住所自動入力機能を設置する方法郵便番号を入力するだけで該当する住所が自動入力(補完)される仕組みを、自分のウェブサイト内にある入力フォームに組み込む方法を、All Aboutで記事にしました。
個人サイトや小規模なサイトでも、同人誌の通販とかイベントの参加申し込みとかそんな感じの入力フォームで、住所の入力を求める機会はありそうです。

郵便番号からの住所自動入力機能を設置する方法(@All About ホームページ作成)

jQueryプラグインである「jquery.jpostal.js」を使えば、既存の入力フォームに住所の自動補完機能を加えるのも簡単です。対象のフォームにあまり制約がないので、既存のフォームを特に変更することなく、住所の自動補完機能を加えられます。
しかも、ユーザが郵便番号を入力した瞬間に住所が自動検索されて補完入力されるため、ページ遷移やサブウインドウの表示などの煩わしいステップがないため、動作は軽快です。

住所が自動入力できると、ユーザ側の手間が省けるだけでなく、入力ミスが防げるのでその住所を発送等に利用する側も、郵便物の不達を防げて便利だと思います。
記事中には、サンプルページも掲載していますので、そのHTMLソースをコピー&ペーストすると楽に試せると思います。
住所の入力を求める場面で、ぜひ活用してみて下さい。

(余談)
記事中に掲載する郵便番号の入力例を何にしようかな……と思って、「529-0425」の「滋賀県長浜市 木之本町 木之本」とかどうかな……? と一瞬思ったんですが、まあ、大人しくAll About本社のある「150-0013」(東京都渋谷区恵比寿)にしておきました。(^_^;;;

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---