js 단축키 적용 / javascript 단축키 적용

?

우선, JS 단축키 구현 설명에 앞서 의문이 드는 것이 하나 있을 것입니다.

OS(Window)와 브라우저(Chrome)의 기본 단축키와의 충돌은 나지 않을까?

 

해서 단축키 충돌 여부와 우선순위 확인을 위해 아래와 같은 키 조합을 JS에 구현하여 테스트를 진행해 보았습니다.

1. OS 기본 단축키 : ( ctrl + c ) 복사 기능
2. OS 기본 단축키 : ( window + r ) 빠른 실행 창 띄우기
3. 브라우저(chrome) 기본 단축키 : ( ctrl + 1[숫자] ) 탭이동

결과는 아래와 같습니다.

1. 복사 기능은 무시되고,  JS에 작성한 이벤트 실행됨.
2. JS에 작성한 이벤트는 무시되고, OS 기본 단축키 기능이 실행됨.
   
3. 브라우저 기본 단축키 기능이 무시되고, JS에 작성한 이벤트가 실행됨. (브라우저의 기능은 무시되도록 코드 작성 가능합니다. 방법은 아래에 쓰도록 하겠습니다.)

단축키 기능 작동 우선 순위를 정리하자면 이렇습니다.

• window(OS)키와 조합된 단축키 기능 > JS에서 커스텀한 단축키 기능 > window키와 함께 조합된 단축키 외의 OS 기본 단축키 || 브라우저 기본 단축키 기능

---

구현 방법

아래 코드에서 중요하게 봐야 할 부분은 document.onkeydown의 return 값이 false;여야 한다는 것이다.

// 아래 코드는 ctrl + 숫자(1,2,3,4,5) 조합의 단축키 기능을 작성하는 코드입니다.

var isCtrl = false;
document.onkeyup = function (e) {
    if(e.which === 17) isCtrl = false;
}

document.onkeydown = function (e) {
    if(e.which === 17) {
        isCtrl = true;
    }

    if(isCtrl) {
        switch (e.which) {
            case 49 : // 1
                console.log('1');
                break;
            case 50 : // 2
                console.log('2');
                break;
            case 51 : // 3
                console.log('3');
                break;
            case 52 : // 4
                console.log('4');
                break;
            case 53 : // 5
                console.log('5');
                break;
        }
        return false;
    }
}

---

Key Code

출처 : https://itinerant.tistory.com/69