form 이벤트




값을 수정한 후 다음 요소로 이동하세요


로그인

아이디를 입력하세요

비밀번호를 입력하세요

03-05_form

form 이벤트




값을 수정한 후 다음 요소로 이동하세요


로그인

아이디를 입력하세요

비밀번호를 입력하세요

03-05_form

form 이벤트




값을 수정한 후 다음 요소로 이동하세요


로그인

아이디를 입력하세요

비밀번호를 입력하세요

<!-- 03_event/03-05_form.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-05_form</title>
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
<style type="text/css">
p {
	color: gray;
}
#f1 input.on {
	background-color: silver;
}
#f2 input.on {
	background-color: yellow;
}
</style>
</head>
<body>
	<h1>form 이벤트</h1>
	<br/>
	<div id="f1">
		<input type="text" placeholder="값을 입력하세요"/>
	</div>
	<br/>
	<div id="f2">
		<input type="text" placeholder="값을 입력하세요"/>
	</div>
	<br/>
	<div id="f3">
		<span>값을 수정한 후 다음 요소로 이동하세요</span>
		<input type="text" value="0"/>
	</div>
	<br/>
	<div id="f4">
		<input type="text" placeholder="텍스트를 드래그 하세요"/>
	</div>
	<br/>
	<form class="login" action="#">
		<fieldset>
			<legend> 로그인 </legend>
			<p class="msg_1">아이디를 입력하세요</p>
			<div>
				<label for="user_id"> 아이디 </label><input type="text" id="user_id"/>
			</div>
			<p class="msg_2">비밀번호를 입력하세요</p>
			<div>
				<label for="user_pw"> 비밀번호 </label><input type="password" id="user_pw"/>
			</div>
			
			<br/>
			<button> 전송 </button>
		</fieldset>
	</form>
	<!-- javascript -->
	<script type="text/javascript">
	/*  
		# form 이벤트
		- focus()    : 선택된 요소에 포커스가 들어왔을 때
		  blur()     : 선택된 요소에서 포커스가 사라졌을 때
		  focusin()  : 선택된 요소의 자식 요소에 포커스가 들어왔을 때
		  focusout() : 선택된 요소의 자식 요소에 포커스가 사라졌을 때
		  change()   : 선택된 요소의 값이 변경되었을 때
		  select     : 선택된 요소의 텍스트가 드래그 되었을 때
	*/
		$(document).ready(function(){
			$("#f1 input").focus(function(){
				$(this).addClass("on");
			}).blur(function(){
				$(this).removeClass("on");
			});
			
			$("#f2").focusin(function(){
				$(this).children().addClass("on");
			}.blur(function(){
				$(this).children().removeClass("on");
			});
			
			$("#f3 input").change(function(){
				let data = confirm("값을 변경하실 건가요~");
				if(!data){
					$(this).val(0);	
				}
			});
			
			$("#f4 input").select(function(){
				let value = $(this).val();
				let size = value.length;
				alert(value + " - " + size + " 선택");
			});
			
			$(".login").submit(function(){
				if(!$("#user_id").val()){
					$(".msg_1").css("display", "block");
					$("#user_id").focus();
					return false;
				} else {
					$(".msg_1").css("display", "none");
				}
				
				if(!$("#user_pw").val()){
					$(".msg_2").css("display", "block");
					$("#user_pw").focus();
					return false;
				}
			});
		});	
	</script>
</body>
</html>