자바스크립트 키보드 쇼컷 라이브러리, 마우스트랩
아래 제목으로 질답란에 글을 남긴 적이 있었는데 accesskey는 왜 안된 건진 아직 잘 모르겠습니다만;;
이 곳 게시판 댓글에 accesskey=s 는 어떤 방식으로 적용된 건가요?
https://xetown.com/lakepark/42404
Seung님께서 자바스크립트 매핑으로 처리했다고 해서 소스를 좀 뒤져봤습니다.
키보드 쇼컷 라이브러리, 마우스트랩
마우스트랩이라는 자바스크립트 키보드 쇼컷 라이브러리입니다.
이 자바스크립트 라이브러리를 사용하면 간편하게 구현할 수 있는데요,
https://craig.is/killing/mice
대충 구현 방법을 설명하자면 아래 이벤트 키코드값을 직접 입력해놓고 알아서 잘 사용하는 겁니다;
자세한 설명 방법은 위 홈페이지에 잘 작성되어있습니다;;
사용예제
예를 들어, XE타운에는 댓글 작성 부분에 적용되어있는데요,
function town_shortcutInit() {
Mousetrap.reset();
Mousetrap.prototype.stopCallback = function(d, g, c) {
return -1 < (" " + g.className + " ").indexOf(" mousetrap ") || "mod+enter" == c || "ctrl+enter" == c || "command+enter" == c || "alt+s" == c || "alt+\u3134" == c || "alt+83" == c ? !1 : "INPUT" == g.tagName || "SELECT" == g.tagName || "TEXTAREA" == g.tagName || g.contentEditable && "true" == g.contentEditable
};
Mousetrap.bind(["mod+enter", "alt+s", "alt+\u3134", "alt+83"], function(d) {
town_savePostClick()
});
Mousetrap.bind(["w", "\u3148", "87"], function(d) {
town_gotoWritePost()
});
Mousetrap.bind(["c", "\u314a", "67"], function(d) {
town_gotoWriteComment()
})
}
이런 식으로 해당 키값과 키를 눌렀을 때 동작되는 값들을 함수로 만들어놓습니다.
function town_savePostClick() {
var d = jQuery(".simple_wrt textarea");
0 < d.length ? d.each(function() {
var d = jQuery(this);
0 < d.val().trim().length && town_checkClick(d.parent().parent().find(".bd_btn[type=submit]:visible"))
}) : town_checkClick(jQuery(".bd_btn[type=submit]:visible"))
}
그리고 해당 함수 안에서는 레이아웃에서 해당 셀렉터를 지정한 다음에 키값이 눌렀을 때 동작되는 버튼을 함께 등록해줍니다.
그럼 alt+s를 눌렀을 때, .simple_wrt 안에 textarea에 글이 있으면 .bd_btn 버튼이 눌려지게 되는 것이죠..
JavaScript event.keyCode 자바스크립트 이벤트 키코드표
---------------------------------------
키코드표
---------------------------------------
←(백스페이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27
스페이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36
←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40
INSERT = 45
DELETE = 46
0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57
A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90
윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 93
0(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109
F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123
NUMLOCK = 144
SCROLLLOCK = 145
=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
\(중간) = 220
|
|

댓글 2
town_gotoWritePost()
});
이 부분 더 설명하자면,
w는 영문키보드 자판이며
\u3148은 hangul letter cieuc 입니다.
87은 event.keyCode 번호입니다.
event.keyCode 번호표
http://qorqnseh.blog.me/220524072365
hangul letter cieuc 검색 : ㅈ
http://graphemica.com/%E3%85%88