메뉴 보이기
Profile
이온디

2013.09.22

Script

단축키 핫키로 원하는 동작을 실행하자

조회 수 4428 추천 수 0
출처 및 URL http://miniwini.com/miniwinis/bbs/index....46&p=7 
소스 w키를 눌러보세요

<script language="JavaScript">
function checkHotkey(){
if ( (event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA') ){
if (event.keyCode=='119') alert('w키가 눌러졌습니다.');
}
}
document.onkeypress=checkHotkey;
</script>

<br>
<input type=text>
<br>
<textarea></textarea> 

보통 웹페이지나 게시판에서의 핫키는 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

¸Ç Ŕ§ˇÎ


ĂĘąâČ­¸éŔ¸ˇÎĂĘąâČ­¸éŔ¸ˇÎ

 




이 밖에 사용하기 쉬운 핫키도 있습니다. 다만 이건 인풋박스와 텍스트에이리어에서 동작을 하는데, 

위 소스와 섞어 사용하시면 될 듯 합니다.


&lt;script language="JavaScript"&gt; &lt;!-- 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; // --&gt; &lt;/script&gt;

 


Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

1개의 댓글

Profile
이온디
2013.09.22

벌써 10년도 훨씬 전에 소스네요. 좋은 건 역시 돌고 도네요. :)

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 106
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19177
공지 [미분류] 관련 링크 2010.05.23 33744
159 [HTML5] HTML5 New Elements - New Semantic/Structural Elements 2018.01.07 35
158 [웹폰트] 모빌리어스 웹폰트 사용하기 2015.11.19 186
157 [Form] form 태그의 기본적인 사용방법 2015.08.31 84
156 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015.08.27 208
155 임시 이미지 생성 도구, 플레이스 홀더 placehold.it 2015.08.05 170
154 [Form] form 태그 안에서의 button 태그의 사용 방법(button, a, input type=submit) 2015.06.21 245
153 [jQuery] jQuery Image Slider and Gallery 2015.05.27 403
152 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 2014.09.29 1367
151 [Script] 슬라이드 이미지 2014.06.16 3246
150 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014.06.16 3232
149 [Script] marquee 태그 위에 마우스 올렸을 때 자동스크롤 일시정지.. event 2014.02.11 3851
148 [Form] 셀렉트박스 select 화살표 이미지로 바꾸는 스크립트 2014.01.14 8598
147 [HTML5] ie에서만 사용하는 if IE 사용법나의일 2013.11.07 4050
[Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4428
145 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
144 [Table] 웹 접근성을 고려한 기본 테이블 구조 (html5, table, 웹 접근성, 웹 표준) 2013.09.13 7977
143 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013.09.08 4376
142 [HTML5] [HTML5/CSS3] 멀티미디어 태그 (video, audio, embed, canvas) 2013.09.06 4250
141 [반응형 웹] 전진님의 반응형 웹 강좌 2013.08.18 5174