HTML 입력 필드에서 엔터 키로 검색 버튼 실행하는 방법

웹 개발을 하다 보면, 검색 필드에서 사용자가 엔터 키를 눌렀을 때 검색 버튼이 실행되도록 만드는 기능을 구현해야 할 때가 있습니다. 이 기능은 사용자 경험(UX)을 개선하는 데 매우 중요한 요소 중 하나입니다. 이번 글에서는 HTML과 JavaScript를 사용하여 검색 입력 필드에서 엔터 키를 누르면 특정 버튼의 클릭 이벤트가 실행되도록 만드는 방법을 상세히 설명하겠습니다.

 

 

 

---

HTML 구조

우선, 검색 입력 필드와 검색 버튼이 포함된 HTML 구조를 살펴보겠습니다. 아래는 기본적인 HTML 코드입니다:

<input type="text" id="search" name="search" class="form-control me-2"
    style="width:150px;"
    placeholder="규격"
    autocomplete="off">

<button id="searchBtn" type="button" class="btn btn-dark btn-sm me-4">
    <ion-icon name="search-outline"></ion-icon> 검색
</button>

• <input> 요소: 사용자가 검색어를 입력하는 필드입니다. 이 필드는 id="search"로 지정되어 있어 JavaScript에서 쉽게 참조할 수 있습니다.
• <button> 요소: 검색 버튼입니다. 이 버튼의 id는 searchBtn으로 설정되어 있습니다.

---

JavaScript를 이용한 엔터 키 이벤트 처리

<input> 필드에서 엔터 키를 눌렀을 때 searchBtn 버튼의 클릭 이벤트를 실행하도록 하려면 JavaScript의 keydown 이벤트를 활용해야 합니다. 아래는 이를 구현하는 JavaScript 코드입니다:

// Enter 키로 검색 버튼 실행
document.getElementById('search').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') { // Enter 키 확인
        event.preventDefault(); // 기본 Enter 동작 방지 (폼 제출 방지)
        document.getElementById('searchBtn').click(); // 버튼 클릭 이벤트 실행
    }
});

• addEventListener: 특정 요소에 이벤트를 연결하는 메서드입니다. 여기서는 keydown 이벤트를 search 필드에 연결합니다.
• event.key === 'Enter': 사용자가 누른 키가 Enter인지 확인합니다.
• event.preventDefault(): Enter 키의 기본 동작(폼 제출)을 방지합니다.
• click(): 검색 버튼의 클릭 이벤트를 실행합니다.

---

전체 코드 구현

위에서 설명한 HTML 구조와 JavaScript 코드를 결합하면 아래와 같이 작성할 수 있습니다:

검색 필드에서 엔터 키로 버튼 실행

        // Enter 키로 검색 버튼 실행
        document.getElementById('search').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') { // Enter 키 확인
                event.preventDefault(); // 기본 Enter 동작 방지 (폼 제출 방지)
                document.getElementById('searchBtn').click(); // 버튼 클릭 이벤트 실행
            }
        });
    

---

작동 방식

1. 사용자가 검색 필드에 포커스를 맞춘 상태에서 Enter 키를 누릅니다.
2. JavaScript의 keydown 이벤트가 실행되면서 Enter 키를 눌렀는지 확인합니다.
3. Enter 키가 눌렸다면 기본 동작(폼 제출)을 방지하고, 검색 버튼의 클릭 이벤트를 트리거합니다.
4. 클릭 이벤트가 실행되면서 버튼에 연결된 작업(예: 검색 결과 표시)이 진행됩니다.

---

응용 및 확장

이 방법은 검색 필드 외에도 다양한 곳에서 응용할 수 있습니다. 예를 들어, 로그인 화면에서 사용자가 Enter 키를 눌렀을 때 로그인 버튼을 실행하거나, 다른 입력 필드에서 특정 작업을 트리거하는 데 활용할 수 있습니다.

또한, addEventListener를 통해 이벤트를 동적으로 연결할 수 있으므로, 동적으로 생성된 입력 필드에도 동일한 방식으로 적용할 수 있습니다.

---

마무리

검색 입력 필드에서 Enter 키로 검색 버튼을 실행하는 기능은 사용자 경험을 크게 개선할 수 있습니다. 위의 코드를 프로젝트에 적용하면 사용자 친화적인 웹 페이지를 쉽게 구현할 수 있습니다. 기본적인 HTML과 JavaScript만으로도 충분히 강력한 기능을 제공할 수 있으니, 한 번 따라 해보세요!