jquery：mousedown(func)

このイベントの説明

jQueryの mousedown(func) は、<input><textarea>エリアにカーソル入ったイベントを検知した時に処理を実行します。

構文

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

利用例

①IDとパスワードの入力

下記のIDとパスワード欄で操作してみてください。

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

アカウントを入力しないでパスワードを入れようとするとエラーになり、アカウント欄にカーソルが入るとエラーメッセージを削除します。

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

mousedown処理は18〜27行の所で行っています。

<?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>

参考情報

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