다음은 jQuery의 keydown(), keyup(), keypress() 이벤트를 실용적으로 활용할 수 있는 몇 가지 예제입니다. 각각의 이벤트는 특정 상황에서 효과적으로 사용할 수 있으며 아래에서 자세히 다룹니다.
1. keydown() 예제: 실시간으로 단축키 감지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keydown 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Ctrl + S를 누르면 저장 메시지가 표시됩니다.</p>
<script>
$(document).keydown(function(event) {
if (event.ctrlKey && event.key === "s") {
event.preventDefault(); // 기본 저장 동작 막기
alert("저장되었습니다!");
}
});
</script>
</body>
</html>
사용 시나리오: 단축키를 이용한 특정 기능 구현 (예: 저장, 새로 고침 방지 등)
2. keyup() 예제: 실시간 텍스트 변환 (대문자로 변환)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keyup 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="input" placeholder="여기에 입력하세요" />
<p>변환 결과: <span id="output"></span></p>
<script>
$('#input').keyup(function() {
let value = $(this).val();
$('#output').text(value.toUpperCase());
});
</script>
</body>
</html>
사용 시나리오: 실시간으로 입력 내용을 가공하여 보여주는 동적 UI.
3. keypress() 예제: 숫자만 입력받기 (Deprecated 방식)
주의: keypress()는 최신 브라우저에서는 더 이상 권장되지 않으며, 대신 keydown() 또는 input 이벤트를 사용하는 것이 좋습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keypress 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="numeric" placeholder="숫자만 입력 가능" />
<script>
$('#numeric').keypress(function(event) {
let charCode = event.which || event.keyCode;
if (charCode < 48 || charCode > 57) {
event.preventDefault(); // 숫자가 아니면 입력 방지
}
});
</script>
</body>
</html>
사용 시나리오: 특정 입력값을 제한 (숫자, 문자 등).
4. keydown() + keyup() 예제: 키보드로 캐릭터 이동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>캐릭터 이동 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#character {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="character"></div>
<script>
let position = { top: 100, left: 100 };
$(document).keydown(function(event) {
const step = 10;
switch (event.key) {
case "ArrowUp":
position.top -= step;
break;
case "ArrowDown":
position.top += step;
break;
case "ArrowLeft":
position.left -= step;
break;
case "ArrowRight":
position.left += step;
break;
}
$('#character').css({ top: position.top + "px", left: position.left + "px" });
});
</script>
</body>
</html>
사용 시나리오: 간단한 키보드 기반 게임이나 인터랙션 구현.
5. 실시간 입력 제한 (keydown + keyup): 최대 글자 수 제한
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>최대 글자 수 제한</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="text" maxlength="10" placeholder="최대 10글자" />
<p><span id="charCount">0</span>/10 글자</p>
<script>
$('#text').keyup(function() {
let length = $(this).val().length;
$('#charCount').text(length);
});
</script>
</body>
</html>
사용 시나리오: 텍스트 필드에서 실시간으로 입력 가능한 글자 수를 보여주기.
이런 방식으로 keydown(), keyup(), keypress()를 활용하여 동적이고 사용자 친화적인 UI를 구현할 수 있습니다. 최신 브라우저 환경에서는 keypress() 대신 keydown()이나 input 이벤트를 사용하는 것이 더 적합합니다.
#jquery #keydown() #keyup() #keypress() #event #실시간으로단축키감지 #실시간텍스트변환 #대문자로변환 #숫자만입력받기 #키보드로캐릭터이동 #최대글자수제한
'프로그램' 카테고리의 다른 글
| jquery 드롭다운 메뉴에서 선택에 따라 내용 변경 (0) | 2024.11.26 |
|---|---|
| jQuery의 change() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.24 |
| jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.22 |
| jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.21 |
| jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
댓글