menu
menu

郵便番号でフォームの住所を自動入力 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook11
  • はてなブックマーク6
  • Google+1
  • Pocket0
  • Twitter0

郵便番号でフォームの住所を自動入力

  • Labs

jQuery

こんにちは(・∀・)

 郵便番号の入力フィールドに郵便番号を入力するとフォームに自動で住所を入力してくれる便利なjQueryライブラリがありますのでご紹介します。

郵便番号を入力すると自動で住所を入力してくれるライブラリ

 googlecode.comに直接リンクを貼って使用することもできます直リンクで使用する場合はこちら<script src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>を使用してください。

 ダウンロードはこちらのhttps://github.com/ninton/jquery.jpostal.js/からダウンロードしてください。


【設置方法】

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。それとあわせて同じく<head>内に googlecode.comからの直リンクを貼るか、 https://github.com/ninton/jquery.jpostal.js/からダウンロードしたjquery.jpostal.jsを読み込みます。



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  and
<script src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>//ライブラリに直リンクの場合
  or
<script src="jquery.jpostal.js"></script>//ライブラリをダウンロードして使用する場合
サンプルデモ

HTML

<p><input type="text" id="postalcode" name="postalcode" placeholder="郵便番号を入力"></p>
<p><input type="text" id="address" name="address" placeholder="住所"></p>
JavaScript

$(window).ready( function() {
$("#postalcode").jpostal({
postcode: ["#postalcode"],
address: {"#address": "%3%4%5"}
});
});

JavaScriptのaddress部分に入っている「%3%4%5」の意味は次の通りです。

"%3"都道府県を表示
"%4"市区町村を表示
"%5"町域を表示
"%6"大口事務所の番地を表示
"%7"大口事務所の名称を表示
"%8"都道府県(半角フリガナ)を表示
"%9"市区町村(半角フリガナ)を表示
"%10"町域(半角フリガナ)を表示

郵便番号欄及び住所欄の入力フィールドが分割されている場合は次のようにします。

サンプルデモ

-

HTML

<p>
<input type="text" id="postalcode1" name="postalcode1">-
<input type="text" id="postalcode2" name="postalcode2">
</p>
<p><input type="text" id="address1" name="address1"></p>
<p><input type="text" id="address2" name="address2"></p>
<p><input type="text" id="address3" name="address3"></p>
JavaScript

$(window).ready( function() {
$("#postalcode1").jpostal({
postcode: ["#postalcode1","#postalcode2"],
address: {"#address1": "%3","#address2": "%4","#address3": "%5"}
});
});

address1は都道府県、address2は市区町村、address3は町域に分けてあります。


 注意点として、郵便番号を入力する際、全角だと機能しません。半角で入力するよう誘導する必要があります。


 いかがでしたでしょうか。自動で住所の入力を補助してくれるプラグインは色々とありますが、jquery.jpostal.jsは簡単に導入することができ、とても使いやすいプラグインではないでしょうか。


ダウンロード

 https://github.com/ninton/jquery.jpostal.js/

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク6
  • Google+1
  • Pocket0
  • Twitter0