jsp/java script
11주차 - jsp (15) onBlur
우젼
2022. 9. 19. 17:56
이번의 목표
01. onBlur 를 사용해보자
02. ID하나로 다수의 객체의 값을 바꿀 수 있을지 알아보자
onBlur 를 사용하면 객체가 포커스를 잃었을 때에 이벤트가 작동합니다.
마우스로 다른 객체를 클릭하거나, TAB을 누르거나, ENTER를 눌러서 포커스가 변경되는 경우가 그 예시입니다.
그리고 코드를 작성하며 제가 범했던 오류 한가지를 알아볼 것입니다.
span, p, div, label의 id를 같게하여 하나의 함수안에서 id를 통해 값을 모두 바꾸고자 했습니다.
하지만 값이 변경 되는것은 가장 첫번째로 위치한 객체의 값만 변경되어 혼란을 겪었습니다.
이를 해결하고자 각각의 객체에 id를 다르게 했고, 각각의 값을 바꿔주는 방법으로 하여 해결할 수 있었습니다.
글로는 설명이 장황하니 코드를 보는 것이 도움이 될 것 입니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex15</title>
<script type="text/javascript">
function display() {
nameObj = document.getElementById('name');
msgObj = document.getElementById('msg1');
msgObj2 = document.getElementById('msg2');
msgObj3 = document.getElementById('msg3');
msgObj4 = document.getElementById('msg4');
msgObj.value
msgObj.innerHTML = nameObj.value + "<br>"
msgObj2.innerHTML = nameObj.value + "<br>"
msgObj3.innerHTML = nameObj.value + "<br>"
msgObj4.innerHTML = nameObj.value + "<br>"
}
function display2() {
nameObj = document.getElementById('name2');
msgObj = document.getElementById('msg5');
msgObj.innerHTML = nameObj.value + "<br>"
}
</script>
</head>
<body>
<!-- focus가 빠질때에 이벤트가 작동하는 기능은 onBlur 을 사용한다. -->
<h3>p, div, label 의 id를 다르게 하고 값을 바꿔주는 예제</h3>
name : <input type="text" id="name" onBlur="display()"> <br>
<span id="msg1">안녕 난 span이라고해 spam 아니고 span</span> <br>
<p id="msg2">안녕 난 p 야</p>
<div id="msg3">난 사슬낫의 div라고하지</div>
<label id="msg4">꽤나 즐겁게 하시는군요, 이 label이 직접 나서지요</label>
<br>
<hr>
<br>
<h3>p, div, label 의 id를 하나로 하고 한번에 바꿔주려 할 때</h3>
name : <input type="text" id="name2" onBlur="display2()"> <br>
<span id="msg5">안녕 난 span이라고해 spam 아니고 span</span> <br>
<p id="msg5">안녕 난 p 야</p>
<div id="msg5">난 사슬낫의 div라고하지</div>
<label id="msg5">꽤나 즐겁게 하시는군요, 이 label이 직접 나서지요</label>
</body>
</html>02. 실행 화면
① 각각의 객체 id를 다르게 하여 메서드 안에서 각각의 값을 바꿔줄 때에는 정상적으로 변경되는 것을 확인할 수 있습니다.
② 객체들의 id를 같게하여 한번에 바꾸려할때에는 제일 먼저 조우하는 객체만 변경되는 것을 확인할 수 있습니다.