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 이벤트에 대해 작성 필요.
'웹개발' 카테고리의 다른 글
| [jQuery] 처음배우는 Javascript_jQuery, 콤보 박스 선택 (0) | 2021.12.13 |
|---|---|
| [명품 웹 프로그래밍] 9장 예제 9-19, select 객체에서 선택한 과일 출력 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-18, 체크박스로 선택 물품 계산 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-17, 선택된 라디오버튼 알아내기 (0) | 2021.12.12 |
| [명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩 (0) | 2021.12.12 |
