본문 바로가기

Programming/JQuery

jQuery Event - Keyboard Events

jQuery Event - Keyboard Events

.keydown() 키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다.
.keypress() keydown이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등 특수키에는 발생하지 않는다.
.keyup() 키 입력 후 발생되는 이벤트

 

[ .keydown(handler(eventObject) ]

키 입력 시 발생되는 이벤트, 모든 키에 대해 적용이 된다

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

 

[ keydown()과 keypress() 이벤트의 차이점 ] 

.keydown() 이벤트 - 엔터키와 같은 특수 입력키에 대한 내용도 체크
.keypress() 이벤트 - 특수키에 대한 값이 필요 없을 경우에 사용

<html xmlns="http://www.w3.org/1999/xhtml">
<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() 이벤트는 공식적으로 지원하지 않는 함수이다.

실제 동작이 발생했을 때 브라우져 별, 브라우져의 버젼별 그리고 플랫폼에 따라 모두 다르게 동작할 수 있다.

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

keypress 이벤트는 브라우져가 키보드 입력을 받았을 때 요소에 이벤트를 발생한다.

이 이벤트는 keydown와 비슷하지만 키가 반복적으로 눌려질 경우에는 조금 다르다. 만약 유저가 키를 누르고 그 상태를 유지하고 있다면 keydown 이벤트는 한번 발생하지만 keypress 이벤트는 문자가 찍힐 때마다 발생한다. 게다가 보조키(Shift 같은)는 keydown는 이벤트가 발생하지만 keypress 이벤트는 발생하지 않는다.

    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtInput").keypress(function (e) {
                $("#txtKeyCode").val(e.keyCode);
            });

        });
    </script>

[ .keypress() 사용 예제 ]

 입력 :
 키값 :

 

[ .keyup(handler(eventObject)) ]

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

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

 

원본 : http://findfun.tistory.com/entry/jQuery-API-정복-hover-마우스-오버

http://api.jquery.com/

 

'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