input text 에서 엔터 입력시 페이지 이동 막기

ajax 등으로 게시판을 검색한다던가 아니면 습관적으로 테스트 중

엔터키를 눌렀더니 페이지가 아에 redirect(새로 고침)가 되는 현상이 일어났었습니다.

엔터키를 입력했을 때 자동으로 form에 submit이 되는 현상이 일어난 것이지요.

왜 이런일이 일어날까요?

브라우저별로 차이는 있지만 이런 경우는 몇 가지가 정해져 있습니다.

1. <form> 태그 하위에 <input type=text>가 하나 밖에 없는 경우

<form>

     <input type='text' id='nosubmit'>

</form>

2. <form> 태그 하위에 <input type=text>가 여러개지만 한개를 제외한 나머지가 readonly인 경우

<form>

     <input type='text' readonly>

     <input type='text' readonly>

     <input type='text' id='nosubmit'>

</form>

이외에도 다른 경우도 있지만 우선 제가 겪은 것만 적었습니다.

이를 막으려면 다양한 방법이 있습니다.

input text에서 key입력 이벤트에 대해서 차단하는 방법입니다.

$("#nosubmit").click(function(){

     if(e.keycode == 13)

     {

          //submit이 아닌 다른동작하도록 기술

          return;

     }

});

이런 식으로 처리를 할 수 있겠지요.

편리하지만 원하는데로 안 동작하면 참 불편한 기능인 것 같습니다.