웹표준/자바스크립트

Keyup 이벤트

Kiwisae 2022. 8. 17. 10:12

키보드 관련 이벤트는 3가지가 있다.

keyup, keydown, keypress 인데,

그 중 keyup은 키보드를 눌렀다가(keypress) 손을 떼는 순간 발생한다.

 

 

 

 

실습으로 주민번호 입력 양식을 만들어보았다.

앞자리는 숫자 6개, 뒷자리는 숫자 7개로 제한하는데,

앞자리 폼을 다 입력하면 커서가 자동으로 뒷자리 폼으로 넘어가도록 한다.

앞자리 폼, 뒷자리 폼에는 id 값을 부여하고

앞자리 폼인 jumin1 에 on을 붙여 이벤트 핸들러 onKeyup을 만든다.

이 이벤트 핸들러는 head 영역에 정의한 함수를 호출한다.

 

<head>
<script>
	function move(){
		var jumin1 = document.getElementById("jumin1");
		var jumin2 = document.getElementById("jumin2");
	}
</script>
</head>
<body>
주민번호 : 
<input type=text size=6 maxlength=6 id="jumin1" onKeyup="move()"> -
<input type=text size=7 maxlength=7 id="jumin2">
</body>

 

 

그런데 여기까지만 입력하면 앞자리폼에 6자리를 입력해야 하는데,

한 글자만 입력해도 뒷자리로 넘어가버리는 일이 발생한다.

그래서 head 영역에 정의한 함수에 조건식을 추가한다.

 

<head>
<script>
	function move(){
		var jumin1 = document.getElementById("jumin1"); // id가 jumin1인 객체의 값을 구해온다.
		var jumin2 = document.getElementById("jumin2");
		
	if (jumin1.value.length == 6) 		/* 조건식의 좌항과 우항이 바뀌면 안된다. */
		jumin2.focus()
	}
</script>
</head>