지난 몇 개의 Chrome 버전에서는 keydown, keypress, keyup 이벤트 리스너에 전달되는 매개변수로 사용되는 KeyboardEvent가 두 개 추가되었습니다. code 속성 (Chrome 48에 추가됨)과 key 속성 (Chrome 51에 추가됨)은 모두 개발자가 기존 속성을 사용하면 어려운 정보를 간단하게 가져올 수 있는 방법을 제공합니다.
코드 속성
먼저 code 속성이 있습니다. 이는 현재 키보드 레이아웃 (예: QWERTY와 Dvorak), 언어 (예: 영어와 프랑스어) 또는 특수키를 고려하지 않고 KeyboardEvent를 생성하기 위해 누른 키를 나타내는 문자열로 설정됩니다.
이는 어떤 문자에 해당하는지보다는 어떤 물리적 키가 눌렸는지에 관심이 있는 경우에 유용합니다. 예를 들어 게임을 작성하는 경우 특정 키 세트를 사용하여 플레이어를 여러 방향으로 이동할 수 있습니다. 이 매핑은 키보드 레이아웃과는 독립적이어야 합니다.
키 속성
다음은 새 key 속성입니다. 문자열로 설정되지만 code은 누른 물리적 키에 관한 정보를 반환하는 반면 key은 현재 키보드 레이아웃, 언어 및 수정자 키를 고려하여 해당 키로 생성된 문자를 포함합니다.
key 속성의 값을 확인하면 사용자가 텍스트 입력란에 입력한 것처럼 화면에 표시되는 문자를 알아야 할 때 유용합니다.
실제로는 어떤 의미일까요?
구체적인 예를 들어 보겠습니다. 사용자가 QWERTY 키보드 레이아웃이 적용된 미국 키보드를 사용하고 있다고 가정해 보겠습니다. 이 키보드에서 물리적 Q 키를 누르면 code 속성이 "KeyQ"로 설정된 KeyboardEvent가 됩니다. 이는 키보드 레이아웃과 다른 특수키와 관계없이 적용됩니다. 비교를 위해 프랑스어 (AZERTY) 키보드에서는 키캡에 'a'가 인쇄되어 있더라도 이 키의 code는 "KeyQ"입니다.
동일한 미국 키보드에서 물리적 Q 키를 누르면 일반적으로 key가 "q" (특수키 없음), "Q" (Shift 또는 CapsLock 사용) 또는 "œ" (OS X, Alt 사용)로 설정된 KeyboardEvent이 생성됩니다. 프랑스 AZERTY 키보드에서는 이 키를 누르면 'a' (또는 Shift 또는 CapsLock을 사용하면 'A')가 생성됩니다. 다른 키보드 레이아웃의 경우 key 값은 "й", "ض", "ㅂ", "た" 또는 다른 문자일 수 있습니다.
앞의 게임 예시를 다시 살펴보면 게임에서 WASD 키를 사용하여 이동하려면 code 속성을 사용하고 "KeyW", "KeyA", "KeyS", "KeyD"를 확인하면 됩니다. 이 방법은 모든 키보드와 모든 레이아웃에서 작동합니다. 'w'와 'z' 키의 위치를 전환하는 AZERTY 키보드도 예외가 아닙니다.
가상 키보드
지금까지는 물리적 키보드를 가정하는 동작에 중점을 두었습니다. 가상 키보드나 대체 입력 장치에서 입력하는 사용자는 어떻게 하나요? code 속성에 관한 공식 안내는 사양을 참고하세요. 요약하면 표준 키보드의 레이아웃을 모방하는 가상 키보드의 경우 적절한 code 속성이 설정될 것으로 예상되지만 기존과 다른 레이아웃을 채택하는 가상 키보드의 경우 code가 전혀 설정되지 않을 수 있습니다.
key 속성의 경우 더 간단합니다. 이 속성은 사용자가 (가상으로) 입력한 문자를 기반으로 문자열로 설정됩니다.
사용해 보기
게리 카치마르치크는 KeyboardEvent와 관련된 모든 속성을 시각화하는 멋진 데모를 만들었습니다.
교차 브라우저 지원
code 속성 지원은 이 글을 작성하는 시점에서 Chrome 48 이상, Opera 35 이상, Firefox 44 이상으로 제한됩니다.
key 속성은 Firefox 44 이상, Chrome 51 이상, Opera 38 이상에서 지원되며 Internet Explorer 9 이상 및 Edge 13 이상에서는 부분적으로 지원됩니다.