텍스트 입력창에서 Enter 키를 누른 후 코드 실행하는 방법 (jQuery)

텍스트 입력창에서 Enter 키를 눌렀을 때 특정 동작을 실행하려면 HTML과 jQuery를 함께 사용하면 됩니다. 핵심은 keyup 이벤트로 Enter 키(키코드 13)를 감지한 뒤, 사용자 정의 이벤트를 트리거하는 방식입니다.

동작 원리

jQuery에는 기본적으로 'Enter 키 입력' 전용 이벤트가 없기 때문에, 다음과 같은 두 단계로 구현합니다.

입력창에 keyup 이벤트를 바인딩하여 눌린 키의 keyCode가 13(Enter)인지 확인합니다.
Enter 키라면 trigger() 메서드로 enterKey라는 사용자 정의 이벤트를 발생시켜 원하는 로직을 실행합니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
            $('input').bind("enterKey",function(e){
               alert("Enter key pressed");
            });
            $('input').keyup(function(e){
               if(e.keyCode == 13)
               {
                  $(this).trigger("enterKey");
               }
            });
         });
      </script>
   </head>
 
   <body>
      <input type = "text">
      <p>위 입력창에서 Enter 키를 눌러 보세요.</p>
   </body>
</html>

코드 설명

bind("enterKey", ...) 부분은 입력창에서 enterKey 이벤트가 발생했을 때 실행할 동작을 정의합니다. 여기서는 간단히 알림 창을 띄우도록 했지만, 실제 프로젝트에서는 검색 실행이나 폼 제출 등 원하는 기능으로 대체할 수 있습니다.

keyup(function(e){ ... }) 부분은 키를 뗄 때마다 호출되며, e.keyCode == 13 조건으로 Enter 키 여부를 판별합니다. 조건이 참이면 trigger("enterKey")로 앞서 정의한 이벤트를 실행합니다.

참고 사항

최신 브라우저에서는 e.keyCode 대신 표준화된 e.key === "Enter" 또는 e.code === "Enter" 사용을 권장합니다.
jQuery 3.x부터는 bind()보다 on() 메서드 사용이 권장됩니다.