<input type="text" />태그에서 Enter 칠때 웹페이지 reload 되는 현상의 해결법

Chrome browser 와 IE9 browser 에서 동일하게 form 안의 <input type="text" /> 태그에서 키보드로 엔터를 치면 웹페이지가 Reloading 되는 현상이 있었다.

[참고]

http://stackoverflow.com/questions/12278571/html-text-input-avoid-submit-when-enter-is-pressed

http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter

http://stackoverflow.com/questions/8866053/stop-reloading-page-with-enter-key

웹페이지 안에서 form 이 하나 있을 때, 그리고 그 form 안에 <input type="text" /> 태그가 하나 있을 때 input control 안에서 엔터를 치면 자동으로 submit 이 된다.

이를 방지하려면 아래와 같이 onsubmit="return false" 를 하면 된다.

나의 경우는 submit 을 하는 것이 아니라 form 을 jquery 에서 serialize() 해서 ajax 요청을 보내는 것이라 이렇게 했는데, 그렇지 않고, submit 을 해야 한다고 해도, javascript 안에서 frmSearch.submit(); 을 해주면 form 태그에 onsubmit="return false"를 했더라도 form 이 submit 된다.

=> submit 을 해야 하는 경우도 javascript 로 submit 할 수 있으니 form 태그에 onsubmit="return false" 를 사용해도 된다는 의미이다.

( Chrome Browser 와 IE9 Browser 에서 테스트 해봤음. )

<form id="frmSearch" name="frmSearch" onsubmit="return false;">

<input type="hidden" id="hidSearchType" name="hidSearchType" />

<input type="hidden" id="hidSearchWord" name="hidSearchWord" />

<ul class="SearchType">

<select name="selectType" id="selectType">

<option value="id">ID</option>

<option value="name">이름</option>

</select>

</ul>

<input type="text" class="srch_text" name="searchWord" id="searchWord" onkeydown="fnSearchKeydown()"/>

<a href="javascript:fnSearchBtn()" id="btnSearch"><img src="/image/btn_search.gif" th:src="@{/image/btn_search.gif}" title="Search" class="bt_srch" /></a>

</form>