Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
Tags
- Vue.js
- PythonProgramming
- 프론트엔드
- 문자열
- 리스트
- 자바스크립트
- javascript
- 중도인출
- 특약
- 코딩
- 변환
- 납입
- Java
- 수수료
- 사망
- 교보생명
- 웹개발
- 인출수수료
- 가입
- 뇌출혈
- 보험료
- 급성심근경색증
- 프로그래밍
- 추가납입
- 보험
- 파이썬
- 교보
- 심장질환
- python
- jQuery
Archives
- Today
- Total
SeouliteLab
jQuery .keydown() 메서드 이해하기: 키보드 이벤트 처리하기 본문
keydown()
메서드는 jQuery에서 사용되며, 키보드의 키 다운 이벤트를 처리하는 데에 사용됩니다. 이를 통해 사용자의 키보드 입력에 따른 동작을 감지하고 처리할 수 있습니다.
예제 1: 특정 키 눌림 감지하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keydown() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keydown(function(event){
console.log("키 코드: " + event.which);
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 문서 전체에 대해 키보드의 키 다운 이벤트를 감지하여 해당 키의 키 코드를 콘솔에 출력합니다.
예제 2: 특정 키 눌림에 따른 동작 처리하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keydown() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keydown(function(event){
if (event.which === 13) {
alert("Enter 키가 눌렸습니다.");
}
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 Enter 키가 눌릴 때마다 알림을 표시합니다.
예제 3: 특정 키 조합 입력 감지하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keydown() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keydown(function(event){
if (event.ctrlKey && event.which === 83) {
alert("Ctrl + S 조합이 입력되었습니다.");
}
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 Ctrl + S 조합이 입력될 때마다 알림을 표시합니다.
예제 4: 키 입력에 따른 동작 처리하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keydown() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keydown(function(event){
switch(event.which) {
case 37:
alert("왼쪽 화살표 키가 눌렸습니다.");
break;
case 38:
alert("위쪽 화살표 키가 눌렸습니다.");
break;
case 39:
alert("오른쪽 화살표 키가 눌렸습니다.");
break;
case 40:
alert("아래쪽 화살표 키가 눌렸습니다.");
break;
}
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 화살표 키가 눌릴 때마다 해당 방향의 화살표 키에 대한 알림을 표시합니다.
예제 5: 입력한 키 문자 출력하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keydown() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keydown(function(event){
var keyChar = String.fromCharCode(event.which);
console.log("입력한 키 문자: " + keyChar);
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 입력한 키의 문자를 콘솔에 출력합니다.
'프로그래밍' 카테고리의 다른 글
jQuery .keyup() 메서드 이해하기: 키보드 입력 종료 이벤트 처리하기 (0) | 2024.04.03 |
---|---|
jQuery .keypress() 메서드 이해하기: 키 입력 이벤트 처리하기 (0) | 2024.04.03 |
jQuery.ready() 메서드 이해하기: 문서 준비 이벤트 처리하기 (0) | 2024.04.03 |
jQuery jQuery.proxy() 메서드 이해하기: 함수 컨텍스트 설정하기 (0) | 2024.04.03 |
jQuery jQuery.holdReady() 메서드 이해하기: 문서 준비 이벤트 제어하기 (0) | 2024.04.03 |