웹 개발을 하다 보면 검색창이나 로그인 폼처럼 입력 필드에서 엔터(Enter) 키를 눌렀을 때 버튼 클릭 이벤트가 자동으로 실행되도록 만들어야 하는 경우가 자주 있습니다. JavaScript의 keyup 이벤트와 click() 메서드를 조합하면 아주 간단하게 구현할 수 있습니다.
기본 구현 예제
아래 코드는 입력 필드 안에서 엔터 키를 누르면 버튼의 클릭 이벤트가 발생하도록 처리하는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>엔터 키로 버튼 클릭 트리거하기</title>
</head>
<body>
<h1>Trigger Button Click on Enter Example</h1>
<input id="inputField" value="Some text.." />
<button id="alertBtn" onclick="alert('Button has been clicked')">
Button
</button>
<p>위 입력 필드 안에서 "Enter" 키를 누르면 버튼이 클릭됩니다.</p>
<script>
var inputText = document.getElementById("inputField");
inputText.addEventListener("keyup", function(event) {
if (event.keyCode === 13) { // 13은 엔터 키의 keyCode
event.preventDefault();
document.getElementById("alertBtn").click();
}
});
</script>
</body>
</html>코드 동작 원리
- addEventListener("keyup", ...) : 입력 필드에서 키를 눌렀다 뗄 때마다 지정한 함수가 실행됩니다.
- event.keyCode === 13 : 엔터 키의 고유 키 코드 값은
13입니다. 따라서 이 조건문은 사용자가 엔터 키를 눌렀는지 확인합니다. - event.preventDefault() : 폼 제출이나 페이지 새로고침처럼 엔터 키의 기본 동작이 실행되지 않도록 막습니다.
- .click() : 대상 버튼의 클릭 이벤트를 프로그래밍 방식으로 강제 실행합니다.
실행 결과
위 코드를 실행하면 입력 필드와 버튼이 화면에 표시됩니다.
입력 필드에 텍스트를 입력한 상태에서 엔터 키를 누르면 버튼이 직접 클릭된 것처럼 동작하여 알림 창(alert)이 나타납니다.
더 현대적인 방법: event.key 활용하기
keyCode는 현재 표준에서 권장되지 않는(deprecated) 속성입니다. 최신 브라우저 환경에서는 event.key 값을 비교하는 방식을 사용하는 것이 좋습니다.
inputText.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("alertBtn").click();
}
});event.key === "Enter"는 키 코드 숫자를 외울 필요 없이 의미를 바로 파악할 수 있어 가독성과 유지보수성 면에서 더 유리합니다.
마무리
이처럼 keyup 이벤트 리스너와 조건문만으로도 엔터 키 입력 시 버튼 클릭을 손쉽게 트리거할 수 있습니다. 검색 폼, 채팅 입력창 등 사용자 경험(UX)을 향상시키고 싶은 다양한 상황에서 활용해 보시기 바랍니다.