자바스크립트를 이용하여 웹페이지 상에서 사용자의 키보드 입력을 감지하여 처리하는 방법에 대해서 알아보겠습니다. 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 키보드 이벤트는 DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생할 수 있습니다. 예를 들어, window에서 발생하는
키보드 이벤트 객체키보드 이벤트 객체에는 눌리거나 놓아진 키에 대한 다양한 메타정보가 담겨 있습니다. 예를 들어, 키보드의
쉬프트키와 함께 키보드의
이렇게 이벤트 핸들러 함수에 넘어온 키의 메타정보를 이용하여 다양한 처리를 할 수 있는데요. 대표적으로 웹 애플케이션에서 단축키를 제공하거나, 웹에서 돌아가는 게임에서 키보드 조작을 지원하기 위해서 활용할 수 있습니다. 키보드 이벤트 처리지금부터 키보드 이벤트를 처리하는 간단한 예제 코드를 작성해보겠습니다. 먼저 다음과 같이 숫자 박스를 나타내는 3개의
그 다음, 숫자 박스를 스타일하기 위한 CSS를 작성합니다.
마지막으로
이제 키보드에서 전체 코드완성된 웹페이지와 전체 코드는 아래에서 확인해보실 수 있습니다. 우측에 웹페이지 영역을 한 번 클릭하셔서 포커스를 이동한 후에 테스트해보시기 바랍니다. 마치면서이상으로 자바스크립트로 키보드 이벤트를 처리하는 방법에 대해서 간단히 살펴보았습니다. 키보드 이벤트에 대한 좀 더 자세한 내용은 관련 MDN 문서를 참고바라겠습니다. |