웹 개발을 하다 보면 사용자가 입력 필드에서 Enter 키를 눌렀는지 감지해야 하는 경우가 자주 있습니다. 예를 들어 검색창에서 Enter를 누르면 검색이 실행되도록 하는 기능이 대표적입니다. 이번 글에서는 JavaScript의 onkeypress 이벤트를 활용해 Enter 키 입력 여부를 확인하고, 그 결과를 콘솔에 출력하는 방법을 알아보겠습니다.
1. 기본 원리: keyCode 값 13
키보드의 각 키에는 고유한 keyCode 값이 할당되어 있으며, Enter 키의 keyCode는 13입니다. 따라서 키 이벤트 객체의 keyCode 속성값이 13인지 비교하면 Enter 키 눌림 여부를 판별할 수 있습니다.
2. 입력 필드 생성하기
먼저 키 입력을 받을 텍스트 입력 필드를 만들고, onkeypress 이벤트 핸들러를 연결합니다.
<input id="textBox" type="text" onkeypress="return demoForEnterKey(event)" />
3. Enter 키 판별 함수 작성하기
다음은 demoForEnterKey() 함수의 구현 코드입니다. 이 함수는 이벤트 객체를 매개변수로 받아 keyCode 값을 검사합니다.
function demoForEnterKey(eventName) {
if (eventName.keyCode == 13) {
var t = document.getElementById("textBox");
console.log(t.value);
console.log("Enter key is pressed.....")
return true;
} else {
console.log("Enter key is not pressed.....")
return false;
}
}코드의 동작 방식은 다음과 같습니다.
- keyCode가 13일 때: 입력된 텍스트 값을 콘솔에 출력하고 "Enter key is pressed" 메시지와 함께
true를 반환합니다. - 그 외의 키일 때: "Enter key is not pressed" 메시지를 콘솔에 출력하고
false를 반환합니다.
4. 전체 예제 코드
위 내용을 모두 포함한 완전한 HTML 문서는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</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 id="textBox" type="text" onkeypress="return demoForEnterKey(event)" />
<script>
function demoForEnterKey(eventName) {
if (eventName.keyCode == 13) {
var t = document.getElementById("textBox");
console.log(t.value);
console.log("Enter key is pressed.....")
return true;
} else {
console.log("Enter key is not pressed.....")
return false;
}
}
</script>
</body>
</html>5. 프로그램 실행 방법
위 코드를 실행하려면 파일 이름을 index.html 등으로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server"(Live Server로 열기) 옵션을 선택하면 됩니다. 브라우저에서 페이지가 열리면 입력 필드에 아무 글자나 입력해 볼 수 있습니다.
6. 실행 결과
페이지를 열면 텍스트 입력 상자가 화면에 표시됩니다.
이 상태에서 일반 문자 키를 누르면 콘솔에 다음 메시지가 출력됩니다.
Enter key is not pressed.....
반면, Enter 키를 누르면 입력한 텍스트 값과 함께 아래와 같은 결과가 콘솔에 나타납니다.
입력한 텍스트 값 Enter key is pressed.....
추가 팁: 최신 방식 권장 사항
keyCode는 현재 폐기(deprecated)된 속성이므로, 실제 프로젝트에서는 event.key === "Enter" 또는 event.code === "Enter"를 사용하는 것이 좋습니다. 예를 들어 다음과 같이 수정할 수 있습니다.
function demoForEnterKey(eventName) {
if (eventName.key === "Enter") {
console.log("Enter key is pressed.....");
}
}이처럼 JavaScript를 활용하면 간단한 이벤트 처리만으로 사용자의 Enter 키 입력을 손쉽게 감지할 수 있습니다. 검색 기능, 폼 제출 등 다양한 UI 인터랙션에 응용해 보세요.