웹 개발을 하다 보면 검색창이나 로그인 폼처럼 텍스트 입력 필드에서 ENTER 키를 눌렀을 때 버튼이 자동으로 클릭되도록 구현해야 하는 경우가 많습니다. 이번 글에서는 JavaScript의 keyup 이벤트와 keyCode 값을 활용해 ENTER 키 입력 시 버튼을 트리거하는 방법을 알아보겠습니다.
핵심 원리
ENTER 키의 keyCode 값은 13입니다. 입력 필드에 keyup 이벤트 리스너를 등록한 뒤, 눌린 키의 코드가 13인지 확인하고 조건에 맞으면 click() 메서드를 호출하여 버튼 클릭 이벤트를 강제로 발생시키는 방식입니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample,
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
.result {
color: blueviolet;
}
</style>
</head>
<body>
<h1>ENTER 키로 버튼 트리거하기</h1>
텍스트 입력 <input type="text" class="sample" />
<button class="Btn">클릭하세요</button>
<div class="result"></div>
<h3>
위 입력 필드에서 ENTER 키를 누르면 버튼이 실행됩니다
</h3>
<script>
let resultEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
sampleEle.addEventListener("keyup", (event) => {
if (event.keyCode === 13) {
event.preventDefault();
document.querySelector(".Btn").click();
}
});
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "버튼이 클릭되었습니다. 입력된 텍스트 = " + sampleEle.value;
});
</script>
</body>
</html>코드 설명
- keyup 이벤트 리스너 등록: 입력 필드(
.sample)에서 키를 뗄 때마다 콜백 함수가 실행됩니다. - keyCode 13 확인:
event.keyCode === 13조건으로 눌린 키가 ENTER 키인지 판별합니다. - 기본 동작 방지:
event.preventDefault()를 호출하여 폼 제출 등 불필요한 기본 동작을 차단합니다. - 버튼 클릭 실행:
document.querySelector(".Btn").click()으로 버튼의 클릭 이벤트를 프로그래밍 방식으로 트리거합니다.
실행 결과
입력 필드에 텍스트를 입력하고 ENTER 키를 누르면 다음과 같은 화면을 볼 수 있습니다.
입력 필드에 텍스트를 작성한 후 ENTER 키를 눌렀을 때의 결과입니다. 버튼이 자동으로 클릭되어 결과 영역에 입력한 텍스트가 함께 출력됩니다.
참고 사항
keyCode는 현재 표준에서 지원 중단(deprecated)된 속성이므로, 최신 브라우저 환경에서는 event.key === "Enter" 방식을 사용하는 것이 권장됩니다. 다만 기존 코드 호환성을 위해 keyCode 방식도 여전히 널리 사용되고 있습니다.