jquery：change(func)

このイベントの説明

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

構文

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

利用例

①空白文字の検出

下記のIDとパスワード欄からカーソルが出た時点で、そこに全角スペースを含む空白文字が無いかのチェックを行っています。

もし、IDとパスワードがデフォルトで表示される場合は、それを削除してから操作してみてください。

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

空白チェックは28〜46行の所で行っています。

<?php
	$input_submit_msg = "";
	$name	= isset($_POST['username']) ? $_POST['username']:'';
	$pass	= isset($_POST['password']) ? $_POST['password']:'';
	if($name != '' && $pass != ''){
		$input_submit_msg = '【'.$name.'】と【'.$pass.'】で登録されました。';
	}
?>
<form action='' method='post' >
	<p> アカウント: <input type='text'			name='username'	 	size='20'	value='' autocomplete='off' required></p>
	<p> パスワード: <input type='password'	name='password' 	size='20'	value='' autocomplete='current-password' required ></p>
	<input type='hidden' name='position' value=''>  		<!-- 送信ボタンが挿入されて時にjQueryでValue値を設定します-->
	<button type='button' class='login' >LOGIN</button>
	<p class='err_msg' style='color:red;'><?php echo esc_html($input_submit_msg); ?></p> 
</form>
<script>	
	$(function(){
		/******** マウスダウンの処理  *****************/
		$('[name="password"]').mousedown(function(){
			var input_uid = $('[name="username"]').val();
			if(input_uid == ''){
				$('.err_msg').html('アカウントが未入力です。<br>アカウントから入力してください。');
			}else{$('.err_msg').html('')}
		});
		$('[name="username"]').mousedown(function(){
			$('.err_msg').html('');
		});	
		/******** 入力文字のチェック  *****************/	
		$('[name="username"]').change(function(){
			var input_uid = $('[name="username"]').val();
			var id_check = input_uid.match(/[\s　]/u);
			if(id_check != null){
				$('.err_msg').html('アカウントが空白か、アカウントに空白文字が入っています。<br>リセットしますので、再入力してください。');
				$('[name="username"]').val('');
				$('[name="username"]').focus();
			}else{$('.err_msg').html('')}
		});
		$('[name="password"]').change(function(){
			var input_pass = $('[name="password"]').val();
			var pass_check = input_pass.match(/[\s　]/u);
			if(pass_check != null){
				$('.err_msg').html('パスワードが空白か、パスワードに空白文字が入っています。<br>リセットしますので、再入力してください。');
				$('[name="password"]').val('');
				$('[name="password"]').focus();
			}else{$('.err_msg').html('')}
		});
		/******** サブミット処理  *****************/	
		$('.login').click(function(){
			var input_uid = $('[name="username"]').val();
			var input_pass = $('[name="password"]').val();
			if(input_uid != '' && input_pass != ''){
				$('[name="password"]').attr('autocomplete','new-password');
				$('form').submit();
			}
		});
	});
	/******** 画面スクロール  *****************/	
	window.onload = function(){					//画面の表示位置を指定します
    var scrollPosition = <?php echo isset($_POST['position']) ? (int)$_POST['position'] : 0; ?>;
    $(window).scrollTop(scrollPosition);
	};
</script>

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

郵便番号(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です。

■郵便番号検索

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

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

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

参考情報

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