[JavaScript] form 텍스트 박스 엔터 후 새로고침 현상 방지

input 텍스트 박스에 포커스가 있을때, 엔터키를 누르면 발생하는 페이지 재로드 현상을 방지해보자

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

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

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

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

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

2. koycode 값으로 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 박스 추가

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

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

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