웹개발
[명품 웹 프로그래밍] 9장 예제 9-20, 키 이벤트 리스너
hatch
2021. 12. 12. 22:25
728x90
반응형
1. 키 이벤트 종류
1) onkeydown : 키가 눌러지는 순간 호출. 모든 키에 대해 작동
2) onkeyup : 눌러진 키가 떼어지는 순간 호출
3) onkeypress : 1)번과 동일하나 문자 키 + Enter, Space, Esc 에 대해서만 작동.
a. 문자키가 아닌 F1, Shift 등에 대해서는 호출되지 않음.
실행 화면
| 초기 화면 | 일반적인 키 | alt 등 특수 키 |
 |
|
|
2. 자바스크립트 코드(그대로 베낌, 복습 필요)
- (중요!) String.fromCharCode(e.keyCode) : 키보드 내에 눌린 키를 알려줌. 많이 사용하므로 기억할 것!
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
<style>
div {background-color: skyblue; width: 250px; height: 50px;}
</style>
</head>
<body>
<h3>키 이벤트</h3>
<hr>
<p>Alt, Shift, Ctrl 키도 가능. 눌러보시오.</p>
<input type="text" id="text" onkeydown="whatKeyDown(event)">
<div id="div"></div>
<script>
function whatKeyDown(e) {
var str = "";
var div = document.getElementById("div");
//div 객체 내용 지우기
div.innerHTML = "";
if(e.altKey) {
if(e.altLeft) str += "왼쪽 Alt키가 눌러짐";
else str += "오른쪽 Alt키가 눌러짐";
str += "<br>";
}
if(e.shiftKey) {
if(e.shiftLeft) str += "왼쪽 Shift키가 눌러짐";
else str += "오른쪽 Shift키가 눌러짐";
str += "<br>";
}
if(e.ctrlKey) {
if(e.ctrlLeft) str += "왼쪽 Ctrl키가 눌러짐";
else str += "오른쪽 ctrl키가 눌러짐";
str += "<br>";
}
str += String.fromCharCode(e.KeyCode) + "키가 눌러졌습니다."
div.innerHTML = str;
}
</script>
</body>
</html>
3. 복습
- (재강조) String.fromCharCode(e.keyCode) : 키보드 내에 눌린 키를 알려줌. 많이 사용하므로 기억할 것!
- alt, shift, ctrl 키 가운데 왼쪽 / 오른쪽 눌러졌다는 문장 안나오는 경우 있었음.
- 키를 누르는 '순간' 바로 호출이 되므로 떼고서도 기록 남아있음.
>> 새로 입력하는 순간 내용 변하긴 함.
손 떼고 기록 없애려면 onkeyup 이벤트에 대해 작성 필요.