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

jQuery API 정복 - keyup(), 키를 눌렀다 뗄때

by zoo10 2011. 12. 26.

keyup

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

.keyup( handler(eventObject) )Returns : jQuery

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

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

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

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

간단한 예를 보겠습니다.

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

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

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

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

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

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

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

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

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

눌려진 키를 확인하려면, event 객체를 다룰수 있어야 합니다. 브라우져가 이 정보를 담고 있으면, 안정적으로 키 코드를 찾을 수 있도록 jQuery가 .which 속성을 표준화 시켜 줍니다. 이 코드는 키보드의 키에 해당하고, 스페셜 키인 화살표 키도 포함됩니다. 실제 텍스트를 잡아내기 위해서는, .keypress() 함수를 사용하는 것이 조금 더 나은 선택일 것입니다.

덧붙여 설명드리면, 키보드의 키에는 모두 특정 값이 매핑되어 있습니다. 예로 Enter키는 숫자로 13이죠. event.keyCode 라는 속성값을 사용하면 키보드의 모든 키값을 알아낼 수 있습니다. 그 부분을 표현해 주는 글입니다.

예 제  
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 type="text/javascript" src="/scripts/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keyup(function(event) {
   xTriggered++;
   var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
}).keydown(function(event) {
  if (event.which == 13) {
    event.preventDefault();
  }  
});

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

</body>
</html>

미리보기

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

 

keydown, keypress, keyup 세가지 모두 헷갈리지만 꼭 쓰게되는 함수들이죠. 잘 구분해서 적절하게 사용하시기 바랍니다.

그럼 즐프하세요.

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