jQuery+키보드 이벤트를 활용하여 프로그램 작성이 필요하여 구글링중 아주 유용한 포스팅을 확인하였음. 이 포스팅 하나면 웬만한 이벤트는 쉽게 구현 가능할듯함.
jQuery comes with three keyboard events to capture the keyboard activities – keyup(), keydown() and keypress().
jQuery는 키보드액션을 체크하기 위하여 "세개의 키보드 이벤트"를 포함고이있음. 아래 3개이벤트가 그것임
- keyup() – Fire when user releases a key on the keyboard.
- 키보드에서 손을 떼어냈을때 실행됨. - keydown() – Fire when user presses a key on the keyboard.
- 키보드를 눌렀을때 실행됨 - keypress() – Fire when user presses a key on the keyboard.
- 키보드를 눌렀을때 실행됨
In general statement, the keydown() is similar to keypress() events. Actually there are quite few differential betweenkeydown() and keypress() events.
기본적으로 keydown은 keypress 이벤트와 유사함. 사실 둘 사이에는 아주 작은 차이점이 존재함.
1. Repeat keys
If you are press and hold a key, keydown() event is triggered once, but the keypress() event will keep triggering itself until you released the key.
키보드를 누르고있을때 keydown 이벤트는 한번만 실행됨, 그러나 keypress는 키보드에서 손을뗄떼까지 계속 실행됨.
2. Modifier keys
Keyboard modifier keys (ctrl, shift, alt…) will fire keydown() event but not keypress() event.
ctrl,shift,alt 등의 수정 키를 누를경우 keydown은 작동하지만 keypress는 작동하지 않음
3. KeyCode – ASCII code
For example, A = 65 and a= 97, Please refer to this ASCII table charts.
- keydown() and keyup() will display a = 65, A = 65 (case insensitive – lowercase and uppercase will display same value).
- keypresss() will display a= 97, A=65 (case sensitive – lowercase and uppercase will display different value).
If you want to capture the real character key in, go for keypress() event.
KeyCode is not display in FireFox?
The event.keyCode is not working in FireFox , but work perfect in IE. To get the event.keyCode in Firefox, you should use the event.which instead, and jQuery recommend it as well. So the better way should be
var keycode = (event.keyCode ? event.keyCode : event.which);
Try it yourself
<html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> span{ padding:8px; margin:8px; color:blue; } div{ padding:8px; margin:8px; } </style> </head> <body> <h1>jQuery keyup(), keydown() and keypress() example</h1> <label>TextBox : </label> <input id="textbox" type="text" size="50" /> <div> <label>1. keyup() Message :</label> <span id="msg-keyup"></span> </div> <div> <label>2. keydown() Message :</label><span id="msg-keydown"></span> </div> <div> <label>3. keypress() Message :</label><span id="msg-keypress"></span> </div> <script type="text/javascript"> $('#textbox').keyup(function(event){ $('#msg-keyup').html('keyup() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); $('#textbox').keydown(function(event){ $('#msg-keydown').html('keydown() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); $('#textbox').keypress(function(event){ $('#msg-keypress').html('keypress() is triggered!, keyCode = ' + event.keyCode + ' which = ' + event.which) }); </script> </body> </html>
'JQUERY > 소스코드' 카테고리의 다른 글
| jquery hide여부 (0) | 2015.11.12 |
|---|---|
| jQuery 구형 익스에서 HTML5 적용시키기 (0) | 2015.11.12 |
| jQuery disabled, readonly (0) | 2015.11.06 |
| jquery의 html(), append(), prepend()를 이용해 html 추가하기 (0) | 2015.11.06 |
| jquery 팝업 창 세로 중앙 정렬 (0) | 2015.11.06 |
| jquery의 html(), append(), prepend()를 이용해 html 추가하기 (0) | 2015.10.15 |
| Jquery 웹개발시 F1 키 도움말 막고 단축키로 사용하기 (0) | 2015.10.15 |
| 제이쿼리 팝업 자식창에서 부모창 값 전달 (아이디,함수실행) (0) | 2015.10.13 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!