<input> 엔터(keyCode == 13) 때 새로고침 현상 해결

발생 원인

 

form tag 내부에 input text가 하나 있을 때 엔터 키로 자동 submit이 되면서 생기는 문제

 

 

해결 방법

 

1. form tag에 onsubmit 속성을 이용한다.

 

<form id="searchInfo" onsubmit="return false;">

 

2. input box 추가

 

form 태그 내부에 input 박스가 한 개만 존재해서 생기는 문제이므로 input box 추가로 해결할 수 있다.

<input id="intentName" placeholder="검색어" type="text">
<input type="text" style="display:none">

개인적으로 이 방법은 안쓰고 싶어서 아래 방법으로 해결하였다.

 

 

3. key 이벤트 처리

 

enter key 처리를 위해 keyup, keydown 등등 바꿔가며 써봤는데 계속 실패했다.

up 처리 후 down이 이루어지면서 form이 전달되나 싶어서 prevendDefault도 해보고 down으로 해봐도 마찬가지여서 꽤 혼란스러웠다.

keypress로 해결.

$("#intentName").on("keypress", (event) => {
    if (event.keyCode == 13) {
        event.preventDefault();
        $("[data-role=search]").click();
    }
});