텍스트 입력 필드에서 사용자가 ENTER 키를 눌렀는지 감지하는 것은 검색창이나 로그인 폼 등 다양한 웹 개발 상황에서 자주 필요한 기능입니다. JavaScript에서는 ENTER 키의 keyCode 값인 13을 활용하여 손쉽게 이벤트를 처리할 수 있습니다.
1. 입력 필드 생성하기
먼저 ENTER 키 입력을 감지할 텍스트 입력 필드를 만들어 보겠습니다.
<input type="text" id="txtInput">
2. keyCode와 on() 메서드로 ENTER 키 감지하기
jQuery의 on() 메서드에 keyup 이벤트를 등록하고, 발생한 이벤트의 keyCode가 13인지 확인하면 ENTER 키 입력 여부를 판별할 수 있습니다. 아래는 전체 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ENTER 키 감지 예제</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="txtInput">
<script>
$("#txtInput").on('keyup', function (event) {
if (event.keyCode === 13) {
console.log("Enter key pressed!!!!!");
}
});
</script>
</body>
</html>3. 프로그램 실행 방법
위 코드를 작성한 후 파일 이름을 index.html과 같은 형태로 저장합니다. 그다음 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하면 브라우저에서 프로그램을 실행할 수 있습니다.
4. 실행 결과
프로그램을 실행하면 화면에 텍스트 입력 필드가 나타납니다.
입력 필드에 아무 내용이나 입력한 후 ENTER 키를 누르면, 브라우저 콘솔(Console)에 다음과 같은 메시지가 출력됩니다.
Enter key pressed!!!!!
추가 팁: keydown 이벤트 활용하기
keyup 대신 keydown 이벤트를 사용해도 동일하게 ENTER 키를 감지할 수 있습니다. 또한 최신 JavaScript에서는 keyCode가 지원 중단(deprecated)되었기 때문에, 순수 JavaScript로 작성한다면 event.key === "Enter" 방식을 사용하는 것이 더 권장됩니다.
document.getElementById("txtInput").addEventListener('keydown', function (event) {
if (event.key === "Enter") {
console.log("Enter key pressed!!!!!");
}
});이처럼 keyCode 13 또는 event.key 값을 비교하는 방식으로 텍스트 입력 필드에서 ENTER 키 입력을 간편하게 감지할 수 있습니다.