[javaScript] input text 태그 엔터 시 새로고침 현상 막기

 

현상

input text 박스에서 enter 키에 별도의 onkeypress 기능을 넣지 않아도 새로고침 현상이 나타남.

또는 onkeypress 기능 실행 이후, 새로고침 현상이 나타남.

 

원인

form 태그 내부에 있는 input(type=text) 태그가 단 하나 존재하는 경우, 엔터 > submit 시킨다. 

 

 

 

해결방법

 

1. form 태그의 onsubmit 속성값 이용

 

<form class="search" onsubmit="return false;">

 

2. input 박스 추가

 

input text box가 단 하나 존재하는 경우에 submit 시키는 것이므로,

의미없는 input(type=text) 태그를 추가하여 이를 방지할 수 있다.

 

<input type="text" style="display:none;"> <!--의미없는 태그-->
<input type="text" placeholder="검색어를 입력하세요.">