string(11) "3.239.76.25"

2022年04月24日

jquery:change(func)

このイベントの説明

jQueryの change(func) は<input><textarea><select>タグからカーソルが出たイベントを検知した時の処理を実行します。

 


構文

セレクタ.change(function(){イベントが発生した時の処理})

 


郵便番号から住所を検索する仕組み

郵便番号から住所を検索する方法には色々な物がありますが、ここでは株式会社アイビス社が提供している『zipcloud』の郵便番号検索APIを使った事例を解説していきます。

このAPIは、jQueryのajax通信で指定されたURLに郵便番号を送ると下記の様なデータを返してくれるサービスです。

返り値 内容 備考
results[0].zipcode 郵便番号 7桁の郵便番号。ハイフンなし。
results[0].prefcode 都道府県コード JIS X 0401 に定められた2桁の都道府県コード。
results[0].address1 都道府県名
results[0].address2 市区町村名
results[0].address3 町域名
results[0].kana1 都道府県名カナ
results[0].kana2 市区町村名カナ
results[0].kana3 町域名カナ

詳しくは 郵便番号検索API を参照して下さい。

 


利用例

①郵便番号から住所を検索する。

郵便番号(7桁の数字又は3桁数字-4桁数字)を入力後、tabキー又は住所をクリックして下さい。

ajaxが動き住所を検索してくれます。

該当する郵便番号がない場合はエラーメッセージが表示されます。

これも試してみて下さい。

郵便番号:

住所:

上記は下記のプログラムから構成されています。

<p>郵便番号:<input type='text' name='post_number' class='post_number' maxlength='8'  placeholder='xxx-xxxx' style='width:8em;'  autocomplete='off' ></p>
<p class='post_check' style='color:red;'></p> 
<p>住所:<input type='text'  name='address' class='address' style='width:100%;margin-top:10px;' autocomplete='off'></p>
<script>	
	$(function(){
		$('.post_number').change(function(){
			$.ajax({
				url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('.post_number').val(),
				dataType : 'jsonp',
			}).done(function(data) {
				if (data.results) {
					var address1 = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
					var message = '『' + address1 + '』 の番地及びマンション名等を入力してください。'; 
					var address2 = window.prompt( message );
					if(address2 != null){$('.address').val(address1 + address2);}
					$('.post_check').text('');
				} else {
					$('.post_check').text('この番号の住所はありません。郵便番号を再確信して下さい');
					$('.address').val('');
				}
			});
		});
	});
</script>

■1行目~3行目:HTML

1行目と3行目のinputフィールドはautocomplete='off'を指定してオートコンプリート機能をOFFにしています。

オートコンプリートについては イベント.mousedown(func) を参照して下さい。

■5行目から

ajax通信で『zipcloud』の郵便番号検索APIを検索する部分です。

取得しているデータはaddress1、address2、address3です。

 


参考情報

その他の イベント発生のメソッド も参照してください。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()