티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 키보드 - 이벤트 정리

좋은 블로그 2016. 10. 20. 08:28

1. 키보드 이벤트 - 역할

키보드 반응에 따른 이벤트


2. 키보드 이벤트  - 정리

이벤트 이름

설명

keydown 

키보드를 누를 때 발생

keypress

글자가 입력될 때 발생(한글은 지원 안함)

keyup

키보드를 땔 때 발생


3. 키보드 이벤트  - 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('input').keydown(function() {
        alert($(this).val());
    });
});
</script>
 
<body>
    <input type='text' />
    
</body>




◈ 결과화면


 -  a를 입력한 뒤에 b를 눌렀을 때 





◈ 설명


a를 입력하고 b를 입력했을 때 keydown 이벤트가 발생하여 먼저 alert창을 찍고 다음 b가 입력됩니다






4. 키보드 이벤트  - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('input').keyup(function() {
        alert($(this).val());
    });
});
</script>
 
<body>
    <input type='text' />
    
</body>




◈ 결과화면


 -  a를 입력한 뒤에 b를 눌렀을 때 




◈ 설명


keyup 이벤트는 키보드를 땔 때 발생하는 이벤트로 위와 같은 결과화면이 나오게 됩니다






'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 입력 양식 - 이벤트  (0) 2016.10.24
[jquery] 윈도 - 이벤트 정리  (0) 2016.10.20
[jquery] 마우스 - 이벤트 정리  (0) 2016.10.20
[jquery] stopPropagation() - 이벤트 전달을 제거  (0) 2016.10.17
[jquery] off() , one() - 이벤트 제거  (0) 2016.10.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday