[JSP&Spring] form텍스트 박스 엔터 후 새로고침 방지하기

form태그 내부에 있는 input text box에서 Enter를 누르게 되면 자동으로 Submit이 되면서 페이지가 재로드 됩니다.

(Ajax를 사용할때, 이 부분에서 상당히 애를 먹었습니다.)

 

이를 방지하기 위한 3가지 방법이 있습니다.

 

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

 

<form name="searchForm" onsubmit="return false;" method="post">

onsubmit="return false;"으로 설정해주면 자동 submit을 방지할 수 있습니다.

 

2. keycode 값으로 enter여부를 판단하여 처리

 

<script language="javascript">
	//enter방지
    function captureReturnKey(e) {
    	if(e.keyCode == 13 && e.srcElement.type != "textarea")
        	return false;
    }
</script>

<form name="searchForm" method="post" onkeydown="return captureReturnKey(event)">
	<input type="text" name="test">
</form>

onkeydown으로 키보드 버튼 클릭 시 captureReturnKey함수를 호출하도록 하고, keyCode 13(엔터)일 경우 return false로 엔터키를 방지할 수 있습니다.

 

3. input 박스 추가

 

<div class="srchForm">
	<input type="text" style="display:none;"/>	<!-- 의미없는 텍스트 박스 -->
    	<input type="search" class="input" onkeydown="javascript: if(event.keyCode == 13) {mf_keyDown();}}">
</div>

엔터키를 눌렀을때 자동으로 submit되는 원인은 form내부에 input 박스가 한 개만 존재하기 때문입니다.

따라서, 의미없는 input 박스를 추가하여 이를 방지할 수 있습니다.

 

위 세가지 방식이 있지만 1번 방법이 가장 깔끔한 것 같습니다.

 

 

Reference

• https://ggmouse.tistory.com/98