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
- 파이썬
- 문자열
- 중도인출
- python
- 보험
- 교보
- 변환
- 인출수수료
- 보험료
- 코딩
- 납입
- 웹개발
- javascript
- 프로그래밍
- 사망
- 급성심근경색증
- 자바스크립트
- 수수료
- Java
- 가입
- 추가납입
- 특약
- 리스트
- 교보생명
- jQuery
- 뇌출혈
- 심장질환
Archives
- Today
- Total
SeouliteLab
jQuery .keyup() 메서드 이해하기: 키보드 입력 종료 이벤트 처리하기 본문
keyup()
메서드는 jQuery에서 사용되며, 키보드의 키를 눌렀다가 놓을 때 발생하는 이벤트를 처리하는 데에 사용됩니다. 이를 통해 사용자의 키 입력 종료를 감지하고 처리할 수 있습니다.
예제 1: 키보드 입력 종료 감지하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keyup() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keyup(function(event){
console.log("키 코드: " + event.which);
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 문서 전체에 대해 키보드의 키 입력 종료 이벤트를 감지하여 해당 키의 키 코드를 콘솔에 출력합니다.
예제 2: 특정 키 입력 종료에 따른 동작 처리하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keyup() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keyup(function(event){
if (event.which === 13) {
alert("Enter 키 입력이 종료되었습니다.");
}
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 Enter 키 입력이 종료될 때마다 알림을 표시합니다.
예제 3: 입력한 키에 따른 동작 처리하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keyup() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keyup(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>
설명: 이 예제에서는 화살표 키 입력이 종료될 때마다 해당 방향의 화살표 키에 대한 알림을 표시합니다.
예제 4: 입력한 문자 출력하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keyup() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keyup(function(event){
var char = String.fromCharCode(event.which);
console.log("입력한 문자: " + char);
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 입력한 문자를 콘솔에 출력합니다.
예제 5: 특정 키 조합 입력 종료 감지하기
<!DOCTYPE html>
<html>
<head>
<title>jQuery .keyup() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).keyup(function(event){
if (event.ctrlKey && event.which === 83) {
alert("Ctrl + S 조합이 입력 종료되었습니다.");
}
});
</script>
</head>
<body>
<!-- 내용 생략 -->
</body>
</html>
설명: 이 예제에서는 Ctrl + S 조합 입력이 종료될 때마다 알림을 표시합니다.
'프로그래밍' 카테고리의 다른 글
jQuery .load() 메서드: 외부 콘텐츠 동적으로 불러오기 (0) | 2024.04.03 |
---|---|
jQuery .live() 메서드: 이벤트 위임을 통한 동적 요소 처리 (0) | 2024.04.03 |
jQuery .keypress() 메서드 이해하기: 키 입력 이벤트 처리하기 (0) | 2024.04.03 |
jQuery .keydown() 메서드 이해하기: 키보드 이벤트 처리하기 (0) | 2024.04.03 |
jQuery.ready() 메서드 이해하기: 문서 준비 이벤트 처리하기 (0) | 2024.04.03 |