예제 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 |