[javascript] input 태그 엔터키 새로고침 현상

input 태그 엔터키 새로고침 현상

이슈 ) <input type="text"> 태그에 포커스가 있을 때, 엔터키를 누르면 페이지가 새로고침 되는 현상
원인 ) <form> 태그 내부에 <input type="text">가 하나밖에 없다면, 엔터키 눌렀을 때 자동으로 submit 처리됨.

 

해결 방법 3가지 (출처 - 구글링)

1. form 태그의 onsubmit 속성값 이용, return false; 처리

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

 

+) ajax 통신이 아닌 form submit 이 필요한 경우

$("#searchForm").prop("onsubmit", true);
$("#searchForm").submit();

 

2. 의미없는 input 박스 추가

text type의 input 태그가 하나밖에 없어서 그런 것이므로, style=display:none; 인 인풋을 추가해준다.
제일 쉬운 방법 같지만 뭔가 야매스러워서 별로 안쓰고 싶은 방법..

<input type="text" style="display:none;"> <!-- 추가 -->
<input type="text" id="title" name="title" placeholder="제목을 입력하세요.">

 

3. keycode 값으로 엔터(13) 인지 판단 

<input type="text" placeholder="검색어를 입력하세요." 
		onkeydown="if(event.keyCode==='13'){ event.preventDefault(); }">

→ 나는 이 방법이 통하지 않았음.

 

---

 

1번 방법으로 해결했다.

끝