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

 

 

 

 

정영판 11-02-09 20:26

  

// TextArea에서 Tab 사용하기 
function fn_TxTabuseTab(el){ 
  if(9==event.keyCode){ 
    (el.selection=document.selection.createRange()).text=" "; 
    event.returnValue=false; 
  } 
}

 

 

 

이온디

profile
이온디는 라이믹스를 비롯한 다양한 CMS의 시드뱅크를 꿈꿉니다. 여러분들이 사랑하는 웹소스를 언제든지 사용할 수 있게 하기 위해 이온디는 매일 소스코드를 유지보수하고 있으며, 언제든지 다운로드할 수 있는 소스마켓을 운영하고 있습니다.

#XE마켓 - 이온디스토어
https://eond.com/xemarket/

# XE/라이믹스 단톡방을 운영 중입니다. (비번: 2022)
https://open.kakao.com/o/giaKKnl

# XE/라이믹스 생활코딩 모듈 강좌입니다.
https://opentutorials.org/module/3774
  • ?
    허.... 디게 어렵다... 저같은 사람은 쓰지도 못하겠네요 ㅠㅠ
  • profile
    Mousetrap.bind(["w", "\u3148", "87"], function(d) {
    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