menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Labs

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

こんにちは(・∀・)

郵便番号の入力フィールドに郵便番号を入力するとフォームに自動で住所を入力してくれる便利な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"}
});
});
Result

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"}
});
});
Result

-

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

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


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

ダウンロード

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

  • カテゴリー:Labs