본문 바로가기

프로그래밍

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;
     }
});

이런 식으로 처리를 할 수 있겠지요.
편리하지만 원하는데로 안 동작하면 참 불편한 기능인 것 같습니다.