보통 웹페이지나 게시판에서의 핫키는 accesskey 속성을 이용해서 처리하죠?
이 경우는 alt를 함께 눌러줘야하는 불편함이 있어서 귀차니스트들에게는 그리 적당하지가 않습니다. -_-a;
해서 게시판에도 넣을겸 한번의 키로 원하는 동작을 실행하는 스크립트를 간단하게 짜보았습니다. ^_^
핫키 이벤트 발생시 숨어있는 form을 날리는 방식(제쯔게시판에서 쓴 방식이던가 -_-) 말고 자바스크립트와 DOM을 써서 한번 만들어보았습니다. :)
소스는 간단하지만 꽤 유용한 부분이 있으니 잘 활용해보세요.
<script language=\"JavaScript\">
function checkHotkey(){
if ( (event.srcElement.tagName != \'INPUT\') && (event.srcElement.tagName != \'TEXTAREA\') ){
if (event.keyCode==\'키값\') alert(\'무슨무슨키가 눌러졌습니다.\');
}
}
document.onkeypress=checkHotkey;
</script>
소스를 설명하자면,
우선 function 부분을 제외하고
document.onkeypress=checkHotkey;
이 부분에서는, document 전체에서 키가 눌러졌는지(onkeypress 이벤트)를 체크하여 아무키나 눌러진 경우 checkHotkey 함수를 실행합니다.
checkHotkey 함수에서는 event.keyCode로 키의 ASCII값을 검사해서, 일치하면 alert 부분을 실행합니다.
여기서 중요한게 있는데
input이나 textarea에서 핫키가 눌러졌을 경우에, 글쓰고 있는데 alert 등의 원치않는 동작이 튀어나오면 곤란하겠죠? :)
그래서,
event.srcElement.tagName 으로 이벤트(onkeypress)가 발생한 오브젝트의 태그를 검사하여 INPUT이나 TEXTAREA가 아닐 경우에만 핫키를 적용합니다.
srcElement는 이벤트가 발생한 element를 가리키며, tagName은 해당 element의 태그 이름을 리턴해주는 속성입니다.
srcElement나 tagName은 둘다 엄청 자주 쓰게 될 것들이니 충분히 익혀두시는게 좋습니다.
쉽고 재밌죠? ^_^
function checkHotkey(){
if ( (event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA') ){
if ( (event.keyCode=='48') || (event.keyCode=='101') ) location.replace('/eond'); /* e, 0 */
if ( (event.keyCode=='49') || (event.keyCode=='119') )location.replace('/web'); /* w, 1 */
if (event.keyCode=='50' || event.keyCode=='100') location.replace('/webmal'); /* d, 2 */
if (event.keyCode=='51' || event.keyCode=='99') location.replace('/community'); /* c, 3 */
if (event.keyCode=='52' || event.keyCode=='108') location.replace('/look'); /* l, 4 */
if ( (event.keyCode=='53') || (event.keyCode=='114') ) location.replace('/rosso'); /* r, 5 */
if ( (event.keyCode=='54') || (event.keyCode=='115') ) location.replace('/is'); /* s, 6 */
if (event.keyCode=='55' || event.keyCode=='110') location.replace('/mynote'); /* n, 7 */
if (event.keyCode=='56' || event.keyCode=='102') location.replace('/likefirst'); /* f, 8 */
if (event.keyCode=='57' || event.keyCode=='104') location.replace('/hera'); /* h, 9 */
if (event.keyCode=='121') location.replace('/yncare'); /* y */
}
}
document.onkeypress=checkHotkey;
이렇게 여러 개를 같이 사용할 수도 있습니다.
키값 부분에 들어갈 숫자는
http://www.powerindex.net/U_convt/ascii/ascii.htm
요기를 참고하시면 되겠습니다.
 ASCII CodeÇĽ
DEC
| HEX
| OCT
| Char
|
| DEC
| HEX
| OCT
| Char
|
| DEC
| HEX
| OCT
| Char
| 0
| 00
| 000
| Ctrl-@ NUL
| 43
| 2B
| 053
| +
| 86
| 56
| 126
| V
| 1
| 01
| 001
| Ctrl-A SOH
| 44
| 2C
| 054
| ,
| 87
| 57
| 127
| W
| 2
| 02
| 002
| Ctrl-B STX
| 45
| 2D
| 055
| -
| 88
| 58
| 130
| X
| 3
| 03
| 003
| Ctrl-C ETX
| 46
| 2E
| 056
| .
| 89
| 59
| 131
| Y
| 4
| 04
| 004
| Ctrl-D EOT
| 47
| 2F
| 057
| /
| 90
| 5A
| 132
| Z
| 5
| 05
| 005
| Ctrl-E ENQ
| 48
| 30
| 060
| 0
| 91
| 5B
| 133
| [
| 6
| 06
| 006
| Ctrl-F ACK
| 49
| 31
| 061
| 1
| 92
| 5C
| 134
| \
| 7
| 07
| 007
| Ctrl-G BEL
| 50
| 32
| 062
| 2
| 93
| 5D
| 135
| ]
| 8
| 08
| 010
| Ctrl-H BS
| 51
| 33
| 063
| 3
| 94
| 5E
| 136
| ^
| 9
| 09
| 011
| Ctrl-I HT
| 52
| 34
| 064
| 4
| 95
| 5F
| 137
| _
| 10
| 0A
| 012
| Ctrl-J LF
| 53
| 35
| 065
| 5
| 96
| 60
| 140
| `
| 11
| 0B
| 013
| Ctrl-K VT
| 54
| 36
| 066
| 6
| 97
| 61
| 141
| a
| 12
| 0C
| 014
| Ctrl-L FF
| 55
| 37
| 067
| 7
| 98
| 62
| 142
| b
| 13
| 0D
| 015
| Ctrl-M CR
| 56
| 38
| 070
| 8
| 99
| 63
| 143
| c
| 14
| 0E
| 016
| Ctrl-N SO
| 57
| 39
| 071
| 9
| 100
| 64
| 144
| d
| 15
| 0F
| 017
| Ctrl-O SI
| 58
| 3A
| 072
| :
| 101
| 65
| 145
| e
| 16
| 10
| 020
| Ctrl-P DLE
| 59
| 3B
| 073
| ;
| 102
| 66
| 146
| f
| 17
| 11
| 021
| Ctrl-Q DCI
| 60
| 3C
| 074
| <
| 103
| 67
| 147
| g
| 18
| 12
| 022
| Ctrl-R DC2
| 61
| 3D
| 075
| =
| 104
| 68
| 150
| h
| 19
| 13
| 023
| Ctrl-S DC3
| 62
| 3E
| 076
| >
| 105
| 69
| 151
| i
| 20
| 14
| 024
| Ctrl-T DC4
| 63
| 3F
| 077
| ?
| 106
| 6A
| 152
| j
| 21
| 15
| 025
| Ctrl-U NAK
| 64
| 40
| 100
| @
| 107
| 6B
| 153
| k
| 22
| 16
| 026
| Ctrl-V SYN
| 65
| 41
| 101
| A
| 108
| 6C
| 154
| l
| 23
| 17
| 027
| Ctrl-W ETB
| 66
| 42
| 102
| B
| 109
| 6D
| 155
| m
| 24
| 18
| 030
| Ctrl-X CAN
| 67
| 43
| 103
| C
| 110
| 6E
| 156
| n
| 25
| 19
| 031
| Ctrl-Y EM
| 68
| 44
| 104
| D
| 111
| 6F
| 157
| o
| 26
| 1A
| 032
| Ctrl-Z SUB
| 69
| 45
| 105
| E
| 112
| 70
| 160
| p
| 27
| 1B
| 033
| Ctrl-[ ESC
| 70
| 46
| 106
| F
| 113
| 71
| 161
| q
| 28
| 1C
| 034
| Ctrl-\ FS
| 71
| 47
| 107
| G
| 114
| 72
| 162
| r
| 29
| 1D
| 035
| Ctrl-] GS
| 72
| 48
| 110
| H
| 115
| 73
| 163
| s
| 30
| 1E
| 036
| Ctrl-^ RS
| 73
| 49
| 111
| I
| 116
| 74
| 164
| t
| 31
| 1F
| 037
| Ctrl_ US
| 74
| 4A
| 112
| J
| 117
| 75
| 165
| u
| 32
| 20
| 040
| Space
| 75
| 4B
| 113
| K
| 118
| 76
| 166
| v
| 33
| 21
| 041
| !
| 76
| 4C
| 114
| L
| 119
| 77
| 167
| w
| 34
| 22
| 042
| "
| 77
| 4D
| 115
| M
| 120
| 78
| 170
| x
| 35
| 23
| 043
| #
| 78
| 4E
| 116
| N
| 121
| 79
| 171
| y
| 36
| 24
| 044
| $
| 79
| 4F
| 117
| O
| 122
| 7A
| 172
| z
| 37
| 25
| 045
| %
| 80
| 50
| 120
| P
| 123
| 7B
| 173
| {
| 38
| 26
| 046
| &
| 81
| 51
| 121
| Q
| 124
| 7C
| 174
| |
| 39
| 27
| 047
| '
| 82
| 52
| 122
| R
| 125
| 7D
| 175
| }
| 40
| 28
| 050
| (
| 83
| 53
| 123
| S
| 126
| 7E
| 176
| ~
| 41
| 29
| 051
| )
| 84
| 54
| 124
| T
| 127
| 7F
| 177
| DEL
| 42
| 2A
| 052
| *
| 85
| 55
| 125
| U
| 
|
 ĂĘąâȸéŔ¸ˇÎ
|
이 밖에 사용하기 쉬운 핫키도 있습니다. 다만 이건 인풋박스와 텍스트에이리어에서 동작을 하는데,
위 소스와 섞어 사용하시면 될 듯 합니다.
| <![CDATA[<script language="JavaScript">
<!--
var key = new Array();
key['f'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_free";
key['n'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_notice";
key['q'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_qna";
key['a'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_faq";
key['w'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_news";
key['v'] = "http://daedong.hs.kr/~mangee/board/zboard.php?id=com_vote";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
for (var i in key)
if (which == i) window.location = key[i];
}
document.onkeypress = getKey;
// -->
</script>]]> |
벌써 10년도 훨씬 전에 소스네요. 좋은 건 역시 돌고 도네요. :)