12주차 - jsp&js (27) onkeyup, <input type="button>
이번의 목표
01. onkeyup에 대해 알아보자
02. onkeyup, onkeydown, onkeypress 의 차이를 알아보자.
03. input type="button" 의 사용을 알아보자.
onkeyup은 키보드를 누르고 놓았을 때 작동하는 이벤트 입니다.
비슷한 기능으로는 onkeypress, onkeydown 가 있습니다.
이 셋의 차이점으로는
onkeyup : 키를 눌렀다 놓았을 때 작동합니다.
onkeydown : 키를 눌렀을 때 작동합니다.
onkeypress : onkeydown과 기능적으로는 동일합니다.
하지만 backspace, enter, tab, shift, ctrl, 한/영 키 등을 인식하지 못합니다.
그리고 다음으로 알아볼 것은 <input type="button"> 입니다.
보통 데이터를 전송할 때에는 <button> 또는 <input type="submit">이 주로 사용됩니다.
여기서 <button>은 문제가 되지 않지만, <input type="submit">이 문제가 되는 부분이 있습니다.
<input type="submit">은 데이터를 전송하기 전에 데이터의 검증을 할 수가 없습니다.
때문에 데이터를 전송하기 전에 검증을 해야하는 상황에는 <button>이나 <input type="button">을 사용해야합니다.
01. 코드
02. 실행 화면
01. 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex27</title>
<script type="text/javascript">
function checkId(obj) {
if (obj.value == '' || obj.value == null) {
alert("아이디는 필수항목 입니다.")
}
}
function checkPw1(obj) {
pwholder = document.getElementById('pwholder1');
if (obj.value.length == 0) {
pwholder.innerHTML = "비밀번호를 입력하세요";
} else if (obj.value.length < 5) {
pwholder.innerHTML = "비밀번호는 5글자 이상이어야합니다."
} else if (obj.value.length >= 5) {
pwholder.innerHTML = "잘 입력 되었습니다."
}
}
function checkPw2(obj) {
pwholder = document.getElementById('pwholder2');
if (obj.value.length == 0) {
pwholder.innerHTML = "비밀번호를 입력하세요";
} else if (obj.value.length < 5) {
pwholder.innerHTML = "비밀번호는 5글자 이상이어야합니다."
} else if (obj.value.length >= 5) {
pwholder.innerHTML = "잘 입력 되었습니다."
}
}
function checkPw3(obj) {
pwholder = document.getElementById('pwholder3');
if (obj.value.length == 0) {
pwholder.innerHTML = "비밀번호를 입력하세요";
} else if (obj.value.length < 5) {
pwholder.innerHTML = "비밀번호는 5글자 이상이어야합니다."
} else if (obj.value.length >= 5) {
pwholder.innerHTML = "잘 입력 되었습니다."
}
}
</script>
</head>
<body>
<!-- 아이디 없으면 필수정보라고 alert 사용
처음에 비밀번호 옆에 (*필수항목) 출력
5글자 아래로는 비밀번호 5자 이상이라 출력
5글자 넘으면 잘 입력 되었다고 출력
비밀번호 다 지우면 비밀번호 입력 출력
-->
<fieldset>
<legend>onkeypress 사용했을때</legend>
<label>아이디</label> <input type="text" id="id" onBlur="checkId(this)">
<br> <label>비밀번호</label>
<input type="password" id="pw" onkeypress="checkPw1(this)"> <label
id="pwholder1">*필수항목</label> <br>
</fieldset>
<br>
<fieldset>
<legend>onkeyup 사용했을때</legend>
<label>아이디</label> <input type="text" id="id" onBlur="checkId(this)">
<br> <label>비밀번호</label>
<input type="password" id="pw" onkeyup="checkPw2(this)"> <label
id="pwholder2">*필수항목</label> <br>
</fieldset>
<br>
<fieldset>
<legend>onkeydown 사용했을때</legend>
<label>아이디</label> <input type="text" id="id" onBlur="checkId(this)">
<br> <label>비밀번호</label>
<input type="password" id="pw" onkeydown="checkPw3(this)"> <label
id="pwholder3">*필수항목</label> <br>
</fieldset>
<!--
submit을 사용하면 데이터의 검증을 하고 전송할 수가 없다.
그렇기 때문에 button태그를 사용하거나 type="button"을 사용하여 데이터를 검증해줘야한다.
-->
<input type="button" id="login" value="로그인" onclick="login()">
<input type="button" id="cancel" value="취소" onclick="cancel()">
</body>
</html>02. 실행 화면
See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen.
① onkeypress 일때는 키를 누를때 이벤트가 작동하지만 백스페이스 등의 키는 인식하지 않는 것을 확인할 수 있습니다.
② onkeyup 일때는 키를 눌렀다 놓을때 이벤트가 작동하는 것을 확인할 수 있습니다.
③ onkeydown 에서는 키를 누를때 이벤트가 작동하는 것을 확인할 수 있습니다.