[JavaScript] form, input 엔터키 이벤트 안되는 문제

 웹 개발 중 form, input, button 을 이용해 검색 기능을 구현하려 했다. 그러던 중 사용자가 원하는 검색어를 입력하고 검색 버튼을 클릭하면 기능이 잘 작동하지만, 엔터키는 작동하지 않는 문제가 발생했다.

예시 이미지 ( 아래 HTML 과는 다름 )

왜 버튼을 클리하면 잘 작동하는 검색기능이 엔터키로는 작동하지 않았을까? 

 

문제 1. 엔터키를 눌러도 작성한 함수가 작동하지 않음

엔터키를 누르면 기본적으로 html form을 전송하게 되는 것이 디폴트로 정해진 행동이다. 
하지만 form 요소 안에 데이터가 도착할 URL 을 명시하는 action 속성 값이 포함되어있지 않은 상태였기에, 
같은 페이지를 계속 리다이렉트하기 때문에 아무런 일이 일어나지 않는다. 
따라서 e.preventDefault() 를 통해 디폴트 행동을 막아주어 엔터키가 작동할 수 있게 되었다. 

function search(ele) {
    if(event.key === 'Enter') {
        event.preventDefault();
        if (ele.value.length > 1){
            location.href="...." + ele.value;
        }
    }
}

 

 

문제 2. 엔터키는 작동했지만, 검색창의 입력값을 제대로 받아오지 못했다

input 태그 안에서 키가 눌리면 어떤 함수가 작동할지 ( 여기서는 search ) 전달하고, 이때 this 값을 활용해 input 안의 값을 가져온다. 

<form class="...">
    <div class="input-group">
        <input class="..." id="..." ... onkeydown="search(this)"/>
        <button class="..." id="..." type="button" onclick="BtnClick()"> <i class="..."></i></button>
    </div>
</form>

그리고 위 코드에서와 마찬가지로, this 값을 ele 로 가져와 ele.value 값을 함수 내에서 사용할 수 있다.

function search(ele) {
    if(event.key === 'Enter') {
        event.preventDefault();
        if (ele.value.length > 1){
            location.href="...." + ele.value;
        }
    }
}

 

 

 

# 참조 

https://stackoverflow.com/questions/20998541/get-the-value-of-input-text-when-enter-key-pressed

Get the value of input text when enter key pressed

https://stackoverflow.com/questions/49204953/window-location-href-does-not-work-for-enter-key-event-in-search-box

window.location.href does not work for Enter key event in search box