[JS] 키보드 단축키 만들기

keydown Event에 담겨오는 다양한 키 정보를 이용해서 단축키를 생성할 수 있습니다.

 

예제 코드

 

코드

document.addEventListener('keydown', (event) => {
  event.preventDefault();
  
  // keyCode
  if (event.keyCode === 67 && event.shiftKey) {
    alert('Shift + C 단축키');
    return false;
  }
  
  // key
  if (event.key === 'v' && event.altKey && event.ctrlKey) {
    alert('Ctrl + V + ALT 단축키');
    return false;
  }
  
  // code
  if (event.code === 'KeyD' && event.altKey) {
    alert('ALT + D 단축키');
    return false;
  }
});

event.preventDefault() 메서드는 기존에 존재하는 단축키(Ctrl + C - 복사하기)를 막을 수 있습니다.

 

단축키를 지정하는 방법으로는 keydown event가 실행될 때, keyCode, key, code, altKey, shiftKey... 등의 값을 이용해서 단축키를 만들 수 있습니다.

 

event ( keyCode, key, code )

• keyCode
  • 대소문자 영향은 받지 않는다. ('C' -> 67, 'c' -> 67)
  • 한영 변환에 따른 keyCode 값이 다르다.
  • 원하는 키를 찾기 위해서 별도의 찾는 과정이 필요하다.
• key
  • 대소문자 영향을 받는다. ('S', 's')
  • Shift를 누른 상태의 단축키를 만들려면 's'가 아닌 'S'로 비교해야 한다!
• code
  • key 배열의 값을 가져오기에 대소문자, 한영 변환 영향이 없다.
  • 숫자와 같이 규칙이 없어서, 필요 키의 코드를 찾는 과정이 필요하다.

 

각 조건문에 return false; 코드를 추가해서 다른 단축키와 중복으로 겹치는 사태를 막았지만, 만약 여러 단축키를 동시에 가능하게 만들려면, 저 구문을 제거하시면 됩니다.

 

keycode 리스트

http://gcctech.org/csc/javascript/javascript_keycodes.htm

JavaScript Keycodes