menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

  • HTML5 フォーム 郵便番号
このエントリーをはてなブックマークに追加