* 키보드 이벤트
- 키보드로만 이벤트를 발생시킬 수 있는 이벤트.
- 예를 들어, 키보등 있는 키를 눌렀을 때나 키에서 손을 떼었을 때 이벤트가 발생하는 것.
* keydown() / keyup() / keypress() 이벤트 메서드
- keydown()와 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시킴.
- 또한 강제로도 이벤트를 발생시킬 수 있음.
- keydown() 이벤트 메서드는 이벤트가 발생했을 때 이벤트의 객체를 이용하면 눌려진 모든 자판에 대한 고유 키 코드값을 받아올 수 있지만, keypress() 이벤트 메서드는 문자(a~z, !, @, #... 등) 자판에 대한 고유 키 코드값은 받아오지 못함.
- 키보드에 눌려진 자판 고유 키 코드값을 이용하면 단축키 기능을 만들 수 있음.
- keyup() 이벤트 메서드는 선택한 요소에서 키보드에 자판을 눌렀다 떼었을 때 이벤트가 발생함.
- 또한 keyup 이벤트를 강제로 발생시킬 수 있음.
- 기본형
|
1. $(요소 선택).keydown(function(){...}); 2. $(요소 선택).keydown(); // 강제로 keydown 이벤트 발생
3. $(요소 선택).keypress(function(){...}); 4. $(요소 선택).keypress(); // 강제로 keypress 이벤트 발생
5. $(요소 선택).keyup(function(){...}); 6. $(요소 선택).keyup(); // 강제로 keyup 이벤트 발생 |
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
<!-- 문단 태그 영역 -->
<body>
<p>
<input type="text" name="user_id" id="user_id" />
</p>
<p id="txt1"></p>
<p id="txt2"></p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function() {
$("#user_id").keydown(function(e){ // (a) 키보드 자판을 눌렀을 때
$(this).css("background-color", "purple"); // (a)에 id="user_id"인 요소의 배경을 보라색으로 적용
$("#txt1").text(e.keyCode); // 고유 키 코드값 출력
});
$("#user_id").keypress(function(e){ // 키보드 자판을 눌렀을 때
$("#txt2").text(e.keyCode); // 고유 키 코드값 출력
});
$("#user_id").keydown(function(){ // (b) 키보드 자판을 눌렀을 때
$(this).css("background-color", "yellow"); // (b)에 id="user_id"인 요소의 배경을 노란색으로 적용
});
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 효과 제어 메서드 (0) | 2017.05.24 |
|---|---|
| 효과 및 애니메이션 메서드 (0) | 2017.05.24 |
| 그룹 이벤트 등록 및 삭제하기 (0) | 2017.05.24 |
| 자주 사용되는 기타 이벤트 메서드 (0) | 2017.05.23 |
| 키보드 접근성을 위한 이벤트 등록법 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 마우스 이벤트 (0) | 2017.05.23 |
| 이벤트 등록 메서드 - 로딩 이벤트 메서드 (0) | 2017.05.23 |
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
