본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - keypress(), 브라우져의 키 누름 이벤트

by zoo10 2011. 12. 26.

keypress

원문 링크 http://api.jquery.com/keypress/

.keypress( handler(eventObject) )Returns : jQuery

개요 : "keypress" JavaScript 이벤트를 바인딩하거나 요소에 이벤트를 발생시킵니다.

  • .keypress( handler(eventObject) )
  • handler(eventObject) 이벤트가 발생되면 실행될 기능
  • .keypress( [eventData], handler(eventObject) )
  • eventData 이벤트 핸들러에 전달될 데이터 집합
  • handler(eventObject) 이벤트가 발생되면 실행될 기능
  • .keypress()

Note: keypress 이벤트는 공식적으로 지원하지 않는 함수입니다. 실제 동작이 발생했을 때 브라우져 별, 브라우져의 버젼별 그리고 플랫폼에 따라 모두 다르게 동작할 수 있습니다.

이 함수는 두 개의 인자를 갖는 .bind('keypress', handler).trigger('keypress') 함수의 줄임 표현입니다.

keypress 이벤트는 브라우져가 키보드 입력을 받았을 때 요소에 이벤트를 발생시킵니다. 이 이벤트는 keydown와 비슷합니다만 키가 반복적으로 눌려질 경우에는 조금 다릅니다. 만약 유저가 키를 누르고 그 상태를 유지하고 있다면 keydown 이벤트는 한번 발생하지만 keypress 이벤트는 문자가 찍힐 때마다 발생합니다. 게다가 보조키(Shift 같은)는 keydown는 이벤트가 발생하지만 keypress 이벤트는 발생하지 않습니다.

이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있습니다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성됩니다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있습니다.

간단한 예를 보겠습니다.

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
  Trigger the handler
</div>

이벤트를 input 필드에 바인딩 시키겠습니다.

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

input 필드에 포커스를 위치 시키고 키보드를 누르면 알림창이 나타납니다.

.keypress() 이벤트를 인자없이 수동으로 발생시키려면 :

$('#other').click(function() {
  $('#target').keydown();
});

이번에는 "Trigger the handler" 부분을 클릭합니다. 위와 마찬가지로 알림창이 나타납니다.

키 누름을 어디서든 감지할 필요가 있다면 (예를들어, 페이지에 글로벌 단축키를 구현하는 것과 같은), document 객체에 바인딩하면 아주 유용합니다. 이 이벤트는 버블링이 되기 때문에, 명시적으로 중단을 하지 않는다면 DOM의 최상위 까지 전달이 되는 것입니다.

어려운 번역이지만 요는 document에 이 이벤트를 바인딩하면 언제 어디서나 키보드 누름을 감지할 수 있다는 것입니다.

눌려진 키를 확인하려면, event 객체를 다룰수 있어야 합니다. 브라우져가 이 정보를 담고 있으면, 안정적으로 키 코드를 찾을 수 있도록 jQuery가 .which 속성을 표준화 시켜 줍니다. 이 코드는 키보드의 키에 해당하고, 스페셜 키인 화살표 키도 포함됩니다.

Note keydownkeyup 은 눌린 키보드의 키 코드를 제공합니다. 반면, keypress는 입력된 문자를 알려줍니다. 예를 들어, 소문자 "a" 를 입력하면 65 by keydownkeyup는 65를 반환하지만, keypress는 97를 반환합니다. 대문자 "A" 는 세가지 함수 모두 65 를 반환합니다. 이런 차이 때문에, 특별한 키(방향키 같은)를 알아내려면 .keydown() 또는 .keyup() 함수를 사용하는 것이 더 좋습니다.

예 제  
input에 키가 눌려졌을 때 이벤트 객체의 정보를 보여줍니다. Note: 이 데모는 이벤트 객체의 결과물을 보여주기 위해 (http://api.jquery.com/scripts/events.js)에 속한 간단한 $.print() 플러그인을 제공합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text" />
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script src="http://api.jquery.com/scripts/events.js"></script>
<script>
var xTriggered = 0;
$("#target").keypress(function(event) {
  if ( event.which == 13 ) {
     event.preventDefault();
   }
   xTriggered++;
   var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
});

$("#other").click(function() {
  $("#target").keypress();
});</script>

</body>
</html>

미리보기

$.print의 사용법이 좋네요. 다른 부분은 keydown과 크게 다를것이 없습니다.

 

음, 아주 좋은 정보를 알았습니다. 사실 keydown, keypress의 명확한 차이를 몰랐었는데요. keydown은 키보드의 키값을 keypress는 키로 입력받은 값의 키 코드를 반환하는 것이였네요. 땡스 jQuery~~

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.