jQuery - 키보드 이벤트

사용자가 키보드를 눌렀을 때 발생한 이벤트를 처리할 수 있습니다.

이벤트	설 명
.keydown()	사용자가 키보드의 키를 누를 때 발생
.keypress()	사용자가 키보드의 키를 누른 상태일 때 발생 (shift, alt, ctrl, esc 는 작동하지 않음)
.keyup()	사용자가 키를 누르고 놓을 때 발생

다음 속성을 이용해 키보드 값을 얻을 수 있습니다.

속 성	설 명
key	누른 키의 문자를 반환. 대소문자를 구분하여 출력함.
code	누른 키의 문자 앞에 식별자를 붙여 반환. 대소문자를 구분하지 않음. Ex.) A를 누르면 KeyA 의 형식으로 반환함
keyCode	누른 키의 아스키 코드 값 반환
altKey	Alt 키가 누른 상태이면 true, 아니면 false
ctrlKey	ctrl 키가 누른 상태이면 true, 아니면 false
shiftKey	sfift 키를 누른 상태이면 true, 아니면 false

key 속성

keyCode 를 이용해 얻은 아스키 코드 값을 문자로 변환하는 과정이 번거로울 수 있습니다. 이럴 때 사용자가 입력한 문자를 그대로 출력하려면 key 속성을 이용하면 됩니다.

<script>
$(function(){
  $("#user").keydown(function(e){
    console.log( String.fromCharCode(e.key) );
 });
});
</script>

<input type="text" name="user" id="user" value="">

code 속성

누른 키의 문자 앞에 식별자를 붙여 반환합니다. A 를 누르면 keyA 형식의 식별자가 붙습니다.

<script>
$(function(){
  $("#user").keypress(function(e){
    $('#log').text(e.code);
 });
});
</script>

<input type="text" name="user" id="user" value="">
<p id="log"></p>

keyCode 속성

사용자가 누른 키의 아스키 코드 값을 문자로 변환하여 콘솔 창에 출력합니다.

<script>
$(function(){
  $("#user").keydown(function(e){
    console.log( String.fromCharCode(e.keyCode) );
 });
});
</script>

<input type="text" name="user" id="user" value="">

shiftKey 속성

Shift 키를 누른 상태이면 경고창이 뜹니다.

<script>
$(function(){
  $("#user").keydown(function(e){
    if(e.shiftKey == true){
      alert( "Shift 키가 눌려 있습니다." );
    }
 });
});
</script>

<input type="text" name="user" id="user" value="">