컨트롤, 알트, 쉬프트 키를 확인하는 방법
dev | 2022-06-19
최신 브라우저들은 키보드 이벤트나 마우스 이벤트에 컨트롤(Ctrl), 알트(Alt), 쉬프트(Shift) 키들이 눌렸는지 알려주는 기능이 있다. 각각 event.ctrlKey
, event.altKey
, event.shiftKey
를 이용해서 이벤트 발생 시에 이런 기능키가 눌렸는지 확인할 수 있다.
맥의 경우 컨트롤 키를 누르고 마우스 클릭을 하면 마우스 오른쪽 클릭을 한 것 처럼 컨텍스트 메뉴가 열린다. 많은 경우 윈도우에서 컨트롤 키로 할 수 있는 기능이 맥에서는 커멘드 키를 눌러야 된다. 커멘드 키는 event.metaKey
를 이용해서 확인이 가능하다. 다만 메타키는 윈도우에서는 윈도우키를 의미하기 때문에 맥의 커멘드 키에 기능을 넣으면 윈도우키를 눌렀을 때도 작동하게 된다. 경우에 따라서 윈도우 키에도 동작이 들어가서 이상하게 느껴질 수도 있다.
이런 키들을 이벤트 핸들러에서 확인할 수 있다고 해서 모든 키 조합을 제어할 수 있는 것은 아니다. 탭을 닫거나 여는 기능은 자바스크립트로 제어가 되지 않는다. 탭 닫는 기능은 beforeunload
를 이용하는 방법을 제외하고 사용자가 누른 키를 이용해서는 제어가 불가능하다. 이미 운영체제나 브라우저에서 제어하고 있는 다양한 키 조합은 경우에 따라서 제어가 되기도 하고 안되기도 한다. 되도록 충돌하지 않게 피해서 사용하는 것이 정신 건강에 좋을 것 같다.
지금은 그나마 키 제어를 어느정도 직관적으로 구현할 수 있지만 과거에는 아주 혼란스러웠던 것으로 보인다. 커멘드 키만 해도 브라우저에 따라 키 코드가 달랐다. 며칠 전에 지원이 종료된 IE도 event.metaKey
는 undefined
로 사용할 수 없었다고 한다. 얼마나 혼란스러웠는지 키보드 이벤트 차이점을 정리해 놓은 페이지를 발견했는데 엄두가 안나서 자세히 읽어보지는 않았다.
Comments