View
자바스크립트상에서 엔터키를 누를 때 실행되는 경우 ( 예 : 로그인 , 검색창 등 ) 를 구현하기 위해 또는 , 특정키의 작동을 막기위해 Keycode를 종종 사용하는 경우가 있어서 정리하기로 해본다
특정 키보드를 눌렀을 때 이벤트를 처리하고 싶다면 keycode를 이용하면된다. 키보드를 눌렀을 때의 이벤트가 각 키보드의 정보를 포함하고 있기 때문이다. 오늘 사용하게 될 엔터키는 ASCII Keycode '13'의 값을 가진다.
- Keycode 목록
| key | code | key | code |
| tab | 9 | enter | 13 |
| shift | 16 | ctrl | 17 |
| alt | 18 | caps lock | 20 |
| space | 32 | page up | 33 |
| page down | 34 | end | 35 |
| home | 36 | ← | 37 |
| → | 39 | ↑ | 38 |
| ↓ | 40 | delete | 46 |
| f1 | 112 | f2 | 113 |
| f3 | 114 | f4 | 115 |
| f5 | 116 | f6 | 117 |
| f7 | 118 | f8 | 119 |
| f9 | 120 | f10 | 121 |
| f11 | 122 | f12 | 123 |
| num lock | 144 | scroll lock | 145 |
| ; | 186 (파이어폭스에선 59) | = | 187(파이어폭스에선 61) |
| , | 188 | . | 190 |
- 간단한 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head >
<meta content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function keycodeTest(e) {
if (e.keyCode == "13") {
alert("enter Key");
}
}
</script>
</head>
<body>
<div>
<input type="text" onkeyup="keycodeTest(event);" />
</div>
</body>
</html>
|
cs |
input태그에 keyCodeTest라는 함수를 onkeyup 키보드 이벤트 함수로 지정해놓았다. (onkeyup , onkeydown, onkeypress 이벤트 모두 가능하다 셋의 차이점은 다음에 정리해보기로!)
그리고 keycodeTest함수에서 만약 실행된 키보드이벤트의 keyCode가 13일땐 enterkey라는 문자열을 alert창으로 띄우게 만들었다. 결과는 예상한대로 엔터키를 쳤을 때 "enter Key"라는 문자열이 뜬다.
'JavaScript' 카테고리의 다른 글
| javascript :: CapsLock 버튼 감지하기 (0) | 2023.10.10 |
|---|---|
| javascript :: POST 방식으로 새 창 띄우기 (0) | 2022.03.08 |
| javascript :: SheetJS 테이블들 엑셀 시트 별로 다운로드하기 (4) | 2021.06.17 |
reply
