요즘 웹 어플리케이션이 등장하면서 단축키를 지원하는 서비스들이 늘고 있습니다. 역시 그 시작은 GMail이라고 할 수 있습니다. 국내에서도 대표적으로 라이프팟(Lifepod)과 스프링노트(SpringNote)에서 사용하고 있습니다. 물론 웹사이트의 단축키는 오히려 화가 되는 것을 염두에 두어야 할 것입니다.
쓸데없는 이야기는 그만하고 단축키를 쉽게 구현하기 위한 자바스크립트 코드를 소개할까 합니다.
웹에서 단축키를 구현하기 위해서는 윈도우의 이벤트를 받아 키 코드를 검사한 후 해당 코드에 따라 적절히 분기하여 그에 맞는 함수를 호출해 주는 방식으로 작성하여야 합니다. 하지만 이러한 방법 대신에 사용자 친화적인 코드를 이용하여 누구나 쉽게 사용할 수 있는 라이브러리를 소개합니다.
관련 내용 및 코드 다운로드: Handling Keyboard Shortcuts in JavaScript
아래의 예제와 같이 코드를 작성하면 "Ctrl+Shift+X" 키를 눌러 "Hi there!"라는 메시지를 표시할 수 있습니다.
shortcut 함수는 다음과 같이 3개의 인자를 받고 있습니다.
shortcut과 callback 이외에 opt라는 인자가 옵션으로 존재합니다.
- type (String)
키 이벤트의 종류를 적습니다. 기본값은 'keydown'으로 키가 눌려졌을 때 실행됩니다. 가능한 값은 'keydown', 'keyup', 'keypress' 입니다. - target (DOM Element)
키 이벤트를 감시할 페이지의 엘리먼트 객체입니다. 기본값은 document로 문서의 모든 키 반응을 감시합니다. - propagate (Boolean)
키 이벤트로 함수를 호출한 후 추가적인 이벤트가 등록되어 있을 때 계속적으로 호출할지를 정해줍니다. 기본값은 false로 다음 이벤트로 전달하지 않습니다.
모든 인자를 기본값으로 호출하면 다음과 같이 됩니다.
지원되는 단축키 목록 및 자세한 내용은 위의 관련 페이지 링크를 참고하세요.
Find in this site
About
The truth has a million faces, but there is only one truth.
Blog Visitors
Blog total 137317 visitors.
Today 14 hit, yesterday 48 hit.
Today 14 hit, yesterday 48 hit.
Recent Comments