[JavaScript] input Box 자동 submit 막는 방법 3가지

input Box가 하나이고, 값을 입력 후 enter키를 누르면 submit이 돼버리는 현상이 생겼다.

이 문제를 해결하기 위한 방법 3가지를 적어보려고 한다.

1. input Box를 하나더 생성한다. style로 숨기기.  

<form id="searchForm" name="searchForm">
   <input type="text" title="검색어 입력" id="search01" name="search01" value=""> 
</form>

원래의 소스에 style display:none인 input을 추가해준다. * type은 text *

display:none  - 아예 사라지게 하는 것. 보이지도 않고 해당 공간도 존재하지 X

visibility:hidden - 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재

<form id="searchForm" name="searchForm">
   <input type="text" title="검색어 입력" id="search01" name="search01" value="">
   <input type="text" style="display:none">
</form>

2. keycode값을 판단해서 처리해준다. (추천)  

preventDefault : 브라우저 고유의 동작을 중단 

stopPropagation : 부모 엘리먼트에게 이벤트 전달을 중단

document.폼name.addEventListener("keydown", evt => {
  if (evt.code === "Enter") 
  evt.preventDefault();
});

3. form 태그의 속성값으로 막아주기.  

<form onsubmit="return false"></form>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

input 요소에 enter키 눌렀을 때 원치않는 submit 막기

 

[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?