jQuery Event - Keyboard Events
| .keydown() | 키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다. |
| .keypress() | keydown이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등 특수키에는 발생하지 않는다. |
| .keyup() | 키 입력 후 발생되는 이벤트 |
[ .keydown(handler(eventObject) ]
키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keydown( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keydown()
[ keydown()과 keypress() 이벤트의 차이점 ]
.keydown() 이벤트 - 엔터키와 같은 특수 입력키에 대한 내용도 체크
.keypress() 이벤트 - 특수키에 대한 값이 필요 없을 경우에 사용
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtInput").keydown(function (e) {
$("#txtKeyCode").val(e.keyCode);
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<input type="text" id="txtInput" /> <br/>
<input type="text" id="txtKeyCode" />
</div>
</body>
</html>
[ .keydown() 사용 예제 ]
입력 :키값 :
위의 text박스에 키를 입력 하면 아래의 텍스트 박스에 해당 키의 값이 출력됨을 확인 할 수 있다.
[ .keypress(handler(eventObject) ]
Keypress() 이벤트는 공식적으로 지원하지 않는 함수이다.
실제 동작이 발생했을 때 브라우져 별, 브라우져의 버젼별 그리고 플랫폼에 따라 모두 다르게 동작할 수 있다.
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keypress( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keypress()
keypress 이벤트는 브라우져가 키보드 입력을 받았을 때 요소에 이벤트를 발생한다.
이 이벤트는 keydown와 비슷하지만 키가 반복적으로 눌려질 경우에는 조금 다르다. 만약 유저가 키를 누르고 그 상태를 유지하고 있다면 keydown 이벤트는 한번 발생하지만 keypress 이벤트는 문자가 찍힐 때마다 발생한다. 게다가 보조키(Shift 같은)는 keydown는 이벤트가 발생하지만 keypress 이벤트는 발생하지 않는다.
$(document).ready(function () {
$("#txtInput").keypress(function (e) {
$("#txtKeyCode").val(e.keyCode);
});
});
</script>
[ .keypress() 사용 예제 ]
입력 :키값 :
[ .keyup(handler(eventObject)) ]
keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 요소에 이벤트 발생
이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킬 수 있다. 포커스가 가능한 요소들은 브라우져별로 다양하게 구성된다. 그러나 대부분의 form 요소들은 포커스를 가질 수 있어 해당 이벤트를 발생시킬 수 있다.
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keyup( [eventData], handler(eventObject) )
eventData 이벤트 핸들러에 전달될 데이터 집합
handler(eventObject) 이벤트가 발생되면 실행될 기능
.keyup()
원본 : http://findfun.tistory.com/entry/jQuery-API-정복-hover-마우스-오버
'Programming > JQuery' 카테고리의 다른 글
| jQuery Event - Document loading (0) | 2012.04.24 |
|---|---|
| jQuery Event - Form Events (0) | 2012.04.24 |
| jQuery Event - Mouse Events (0) | 2012.04.23 |
| jQuery Event (0) | 2012.04.23 |
| jQuery Traverse - Tree Traversal (0) | 2012.04.20 |
