예제 9-20. 키 이벤트 리스너

WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 15:57 |

* 키 이벤트, onkeydown, onkeypress, onkeyup


onkeydown : 모든 키에 대해 키가 눌러지는 순간 호출

onkeypress : <Enter>,<Space>,<Esc> 키와 문자키에 대해서만 키가 눌러지는 순간 추가 호출

<F1>,<Shift>,<PgDn>,<Del>,<Ins> 등 문자키가 아닌 경우 호출되지 않음.

onkeyup : 모든 키에 대해 눌러진 키가 떼어지는 순간 호출


* 키 이벤트 객체의 프로퍼티

keyCode // 입력된 키의 유니코드 값

altkey // <Alt>키가 눌러진 상태이면 true

altLeft // 왼쪽 <Alt>키가 눌러진 상태이면 true

ctrlKey // <Ctrl> 키가 눌러진 상태이면 true

ctrlLeft // 왼쪽 <Ctrl> 키가 눌러진 상태이면 true

shiftKey // <Shift> 키가 눌러진 상태이면 true

shiftLeft // 왼쪽 <Shift> 키가 눌러진 상태이면 true


* onreset과 onsubmit

onreset 리스너는 reset 버튼을 클릭하여 폼을 초기화할 때 호출되며,

onsubmit 리스너는 submit 버튼을 클릭되어 폼을 서버로 전송할 때 호출된다.

onreset 리스너에서 false를 리턴하면 폼이 초기화되지 않고,

onsubmit 리스너에서 false를 리턴하면 폼은 서버로 전송되지 않는다.

이 두 리스너는 다음과 같이 <form> 태그에 작성된다.


ex)

<form onreset="..." onsubmit="...">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>키 이벤트</title>
<script>
function whatKeyDown(e) {
    var str = "";
    var div = document.getElementById("div");
    div.innerHTML = ""; // div 객체 내용을 지운다.
    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; // div 객체에 html 문서 조각을 출력한다.
}
</script>
</head>
<body>
<h3>키 리스너와 키 이벤트 객체의 프로퍼티</h3>
<hr>
텍스트 창에 키를 눌러 보세요. Alt, Shift, Ctrl 키도 가능합니다.<br>
<input type="text" id="text" onkeydown="whatKeyDown(event)">
<div id="div" style="background-color:skyblue; width:250px; height:50px">
</div>
</body>
</html>
 
cs



저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 10-1. window.open()으로 윈도우 열기. 예제 10-2. 윈도우 닫기 // 수정해야딤  (0) 2017.11.02
window 객체, window 객체의 프로퍼티와 메소드 // 수정해야됨 p 438  (0) 2017.11.02
예제 9-19. select 객체에서 선택한 과일 출력  (0) 2017.11.02
예제 9-17. 선택된 라디오버튼 알아내기. 예제 9-18. 체크박스로 선택한 물품 계산  (0) 2017.11.02
예제 9-16. onfocus와 onblur, 이름을 입력하지 않고 다른 창으로 갈 수 없음.  (0) 2017.11.02
Posted by 너래쟁이
:

티스토리툴바