자바스크립트 키보드 쇼컷 라이브러리, 마우스트랩

아래 제목으로 질답란에 글을 남긴 적이 있었는데 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