9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【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/