웹 개발을 하다 보면 Enter 키를 눌렀을 때 양식을 제출하거나 사용자가 특정 특수 문자를 입력하지 못하게 하거나 단축키를 설정하는 등 키보드를 기반으로 일부 작업을 수행해야 하는 경우가 있습니다. 이때 사용자가 어떤 키를 눌렀는지 알아내고 그 키를 테스트하는 작은 프로그램을 작성해야 합니다.
$(document).ready (function( ){
var $down = $("#down");
var $press = $("#press");
var $up = $("#up");
$(document).keydown(function(event){
$down.append(String.fromCharCode(event.keyCode) " ");
if (event.ctrlKey) {
alert( "ctrl" );
}
}).keyup(function(event){
$up.append(String.fromCharCode(event.keyCode) " ");
}).keypress( function(event ){
$press.append(String.fromCharCode(event.keyCode) " ");
})
});
메소드를 실행하는 것입니다. down. keyCode를 배열에 푸시하고 up이 트리거되면 $.grep을 사용하여 배열에서 keyCode를 삭제합니다.
언제든지 이 배열은 현재 누른 키를 저장하며 순서는 키 시퀀스에 따라 결정됩니다.
jQuery를 사용하여 현재 누른 키 확인방법은 외부 배열을 사용하여 현재 키를 저장하는 것입니다.
keydown이 트리거되면 keyCode를 배열에 푸시하고 중복 요소를 삭제합니다. keyup이 트리거되면 $.grep을 사용하여 배열에서 keyCode를 삭제합니다.
구현 코드는 다음과 같습니다.
현재 키 :