[jQuery] 키보드 이벤트 (keydown, keypress, keyup)
반응형
jQuery 명령 실행을 위한 스크립트 선언
<head> 스크립트 내에 아래의 jQuery 스크립트를 선언해야 jQuery 명령을 실행할 수 있다
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
이벤트 타입
.keydown() - 키 입력 시 발생되는 이벤트
.keypress() - keydown과 같이 키 입력 시 발생되는 이벤트지만 Enter, Tab 등의 특수키에는 발생하지 않음
.keyup() - 키 입력 후 발생되는 이벤트
[예제1] 입력된 키보드의 코드값을 확인하는 방법 소스
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="test">
<script>
$("#test").keydown(function(e) {
alert(e.keyCode);
});
</script>
</body>
</html>
|
cs |
[예제2] 입력된 값을 확인하는 방법
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
Input: <input type="text" id="in">
Output: <input type="text" id="out">
<script>
$("#in").keyup(function() {
$("#out").val( $(this).val() )
});
</script>
</body>
</html>
|
cs |
좀 더 자세한 안내를 알고 싶다면? 참고하세요~
2022.10.26 - [Web Programming/JavaScript & jQuery] - [javaScript] 키보드 이벤트 타입 및 객체 (keydown & keyup)
[javaScript] 키보드 이벤트 타입 및 객체 (keydown & keyup)
키보드 이벤트 타입 키보드 이벤트는 사용자가 키를 누르거나 키를 높을 때 발생한다. 키를 누를 때는 keydown, 키를 놓을때는 keyup 이벤트가 발생된다. 예전에는 keypress 이벤트도 많이 사용되었으
dotiweb.tistory.com
반응형
'Programming > JavaScript & jQuery' 카테고리의 다른 글
| [Script] resizeTo, resizeBy 를 이용한 브라우저 크기 조절 (0) | 2015.10.01 |
|---|---|
| [Script] setTimeout 함수를 이용한 지연시간 (0) | 2015.09.23 |
| [jQuery] onload, ready 페이지 로딩 시 처리부분 (load, ready) (0) | 2015.09.16 |
| [jQuery] input 폼안의 내용들을 문자열로 나열하기 (.map) (0) | 2015.09.14 |
| [jQuery] 천천히 스크롤되며 올라가는 TOP 버튼 구현 (0) | 2015.09.01 |