반응형
키 입력 이벤트란?
- 키가 입력될 경우 특정 코드를 수행하는 것을 의미
키 입력의 종류
- onkeydown : 키를 누를 때 이벤트 발생
- onkeypress : 키를 누르고 있을 때 이벤트 발생
- onkeyup : 키를 땔 떼 이벤트 발생
키 입력 이벤트 상세히 알아보기
예시 코드
<script>
window.onkeydown = function() {
// 입력한 키 저장
var keycode = event.keyCode;
// html의 누른 키의 정보 확인
document.getElementById('txtKeycode').value = keycode + 'KeyDown';
}
window.onkeypress = function() {
var keycode = event.keyCode;
document.getElementById('txtKeycode').value = keycode + 'KeyPress';
}
window.onkeyup = function() {
var keycode = event.keyCode;
document.getElementById('txtKeycode').value = keycode + 'KeyUp';
}
</script>
<body>
<br>입력키 <input type='text' id='txtKeycode' />
</body>KeyDown
- 키를 누를 때 이벤트 발생
- 제어 키도 인식 할 수 있음 (컨트롤, 엔터 등등)
- 입력된 영문자는 모두 대문자로 인식
KeyPress
- 키를 누르고 있을 때 이벤트 발생
- 제어 키는 인식 할 수 없음
- 입력된 영문자의 대소문자를 가림
KeyUp
- 키를 땔 떼 이벤트 발생
- 제어 키도 인식 할 수 있음
- 입력된 영문자는 모두 대문자로 인식
자 이제 확인해보자!
KeyDown / Press / Up 모두 사용
소문자 a키를 누를 때
- 누르는 순간 누르고 있는 것으로 인식되므로 KeyDown글자는 확인하기 어려움
- 다만, KeyPress를 주석처리하고 Down,Up만 비교하면 확인 할 수 있음
소문자 a키를 땔 때
- 땔 때 인식되므로 키에서 입력이 끝나면 Key Up이 출력
출력되는 97과 65는 무엇일까?
아스키 코드라는 것인데 문자와 여러가지 제어 기호를 식별 할 수 있는 코드로 생각하면 된다.
유니코드 하위호환으로 이해하자! 위에서 언급했지만 한 번 더 말하자면,
- KeyDown, Up : 대문자로만 인식
- KeyPress : 대소문자 구분
그렇다면 키를 때었을 때 65가 출력됐다는 말은 대문자 A의 아스키코드가 65라는 것을,
반면에 키를 누를 때 97이 출력됐다는 말은 소문자 a의 아스키코드가 97이라는 것을 알 수 있다.
제어 키(왼쪽 컨트롤 키)를 누르고 있을 때
- 영문자 A를 누를 때와 다름
- 이는 제어 키는 KeyPress를 인식하지 못하기 때문
- 만약 인식을 했더라면 위에서처럼 KeyDown을 확인 할 수 없이 바로 KeyPress라는 문구가 출력되었을 것
제어 키(왼쪽 컨트롤 키)를 땔 때 있을 때
- 컨트롤 키의 입력이 끝났다는 것을 KeyUp을 통해서 알 수 있음
KeyDown / Up 사용
- KeyPress를 제외하고 영문자를 입력해보자!
<script>
window.onkeydown = function() {
// 입력한 키 저장
var keycode = event.keyCode;
// html의 누른 키의 정보 확인
document.getElementById('txtKeycode').value = keycode + 'KeyDown';
}
// window.onkeypress = function() {
// var keycode = event.keyCode;
// document.getElementById('txtKeycode').value = keycode + 'KeyPress';
// }
window.onkeyup = function() {
var keycode = event.keyCode;
document.getElementById('txtKeycode').value = keycode + 'KeyUp';
}
</script>
<body>
<br>입력키 <input type='text' id='txtKeycode' />
</body>소문자 a키를 누를 때와 땔 때
- KeyDown과 KeyUp은 모두 대문자만 인식
- 소문자 a를 입력하여도대문자 A를 인식한 아스키코드 65의 값이 출력
반응형