keypress
원문 링크 
http://api.jquery.com/keypress/
개요 : "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 keydown 과 keyup 은 눌린 키보드의 키 코드를 제공합니다. 반면, keypress는 입력된 문자를 알려줍니다. 예를 들어, 소문자 "a" 를 입력하면 65 by keydown 와 keyup는 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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API, mousedown, 마우스 누름 이벤트 (0) | 2012.01.04 |
|---|---|
| jQuery API - load(), 로드되면 발생하는 이벤트 (0) | 2012.01.04 |
| jQuery API - live(), 이벤트 바인딩하기 (0) | 2011.12.26 |
| jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0) | 2011.12.26 |
| jQuery API 정복 - keydown(), 키보드 누름 이벤트 (2) | 2011.12.26 |
| jQuery API 정복 - hover(), 마우스 오버 이벤트 (0) | 2011.12.26 |
| jQuery API 정복 - focus(), 요소에 포커스 주기 (0) | 2011.12.13 |
| jQuery API 정복 - event.timeStamp, 이벤트 사이의 시간 (0) | 2011.12.13 |