잡동사니에도 사랑을

[21.10.13] exam08(02_jQueryEvent) 본문

JAVA_EE/JQuery

[21.10.13] exam08(02_jQueryEvent)

luvforjunk 2021. 10. 14. 09:32
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
	<h1>focus/blur 이벤트 확인하기</h1>
	<div id="input">
		<input type="text">
	</div>
	<h2>결과</h2>
	<div id="result"></div>


	<script type="text/javascript"
		src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#input > input[type=text]').focus(function() {
				$('#result').html('포커스가 들어갔습니다.');
			});

			$('#input > input[type=text]').blur(function() {
				$('#result').html('포커스가 나왔습니다.');
			});

			//페이지가 열리면 자동으로 포커스 설정된다
			$('#input > input[type=text]').focus();
		});
	</script>
</body>
</html>
728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.13] exam11(02_jQueryEvent)  (0) 2021.10.14
[21.10.13] exam10(02_jQueryEvent)  (0) 2021.10.14
[21.10.06] exam07(02_jQueryEvent) - Key이벤트(keypress)  (0) 2021.10.07
[21.10.06] exam06(02_jQueryEvent) - KeyName(keyCode)  (0) 2021.10.07
[21.10.06] exam05(02_jQueryEvent) - Key이벤트 확인(Key를 입력하거나 Key를 계속 눌렀을 때의 이벤트 발생)  (0) 2021.10.07
'JAVA_EE/JQuery' Related Articles more