이전 몇 가지 버전의 Chrome에서는 keydown, keypress, keyup 이벤트 리스너에 전달되는 매개변수로 사용되는 KeyboardEvent에 두 가지 기능이 추가되었습니다. code 속성 (Chrome 48에 추가됨)과 key 속성 (Chrome 51에 추가됨)은 모두 기존 속성을 사용하면 어려웠을 정보를 간단하게 얻을 수 있는 방법을 개발자에게 제공합니다.
code[코드] 속성
첫 번째는 code 속성입니다. 이는 현재 키보드 레이아웃 (예: QWERTY 대 Dvorak), 언어 (예: 영어 대 프랑스어) 또는 특수키를 고려하지 않고 KeyboardEvent를 생성하기 위해 눌린 키를 나타내는 string으로 설정됩니다.
이는 키에 해당하는 문자보다는 어떤 실제 키를 눌렀는지를 고려할 때 유용합니다. 예를 들어, 게임을 작성 중인 경우, 특정 키 세트를 통해 플레이어를 서로 다른 방향으로 움직이고자 할 수 있습니다. 이 경우 매핑은 키보드 레이아웃과 무관한 것이 이상적입니다.
키 속성
다음으로 새 key 속성이 있습니다. 또한 문자열로 설정되지만, code는 눌린 실제 키에 관한 정보를 반환하지만 key에는 현재 키보드 레이아웃, 언어, 특수키를 고려하여 해당 키로 생성된 문자가 포함됩니다.
사용자가 텍스트 입력을 입력한 것처럼 화면에 어떤 문자가 표시될지 알아야 할 때 key 속성의 값을 확인하면 유용합니다.
실제로 이는 무엇을 의미할까요?
구체적인 예를 들어 사용자가 QWERTY 키보드 레이아웃이 있는 미국 키보드를 사용한다고 가정해 보겠습니다. 키보드에서 실제 Q 키를 누르면 code 속성이 "KeyQ"로 설정된 KeyboardEvent이 생성됩니다. 이는 키보드 레이아웃 및 다른 특수키와 관계없이 true입니다. 비교를 위해 프랑스어 (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 이상에서 부분 지원됩니다.