input 박스에서 엔터(enter)치면 자동 submit 될때 └ Error


input Box 에서 엔터키를 치면 Submit 또는 화면 새로고침 이 되는 경우가 있다

이럴 경우 원인과 그 해결책이다



1. 원인

<form> 태그 내부에 INPUT 박스가 하나만 존재할 경우 
INPUT 박스에 포커스를 두고 엔터를 치면 Submit 이 실행된다

2. 해결방법

1) keycode 값으로 처리
자바스크립트 onKeyDown(event) 를 이용해서 다른방식으로 처리

2) <form> 태그의 속성 값 추가
<from name="ex" onsubmit="return false;" >
밑줄 친 부분을 <form>에 추가

3) <form> 태그 속에 의미없는 input 박스 추가
사실..이건..꼼수이고 추천하지 않는 방식이다
단! type 이 hidden 은 적용되지 않는다
X  <input type="hidden" value="" />
O  <input style="visibility: hidden; " />


출처 인 곳에서는 3가지를 써놨지만 필자는 1번 또는 2번을 사용해야한다고 생각한다
3번은 의미에 맞지도 않고 기타 브라우져에서 쓸때없는 공간이 생성되기도 한다



PS. 개발도중에 위의 원인 때문에 문제가 생겼을때는 진짜 미치는줄알았다 ㅡ.ㅡ;;
작업하던 페이지는 조회 페이지 였는데 <form> 에는 name 값 이외에는 아무것도 없고
엔터 치면 걸려있지도 않는 새로고침이 실행되면서 날 패닉상태에 빠뜨렸다
(... 새로고침이 되면 자동으로 조회까지 되는 페이지였기에 황당했었다...)

스크립트도 않걸려있는데 엔터치는 것 만으로 조회가 되??????? 헉??? 뭐야이거????
공통으로 특정 네임일 경우 뭐 실행되도록 한거야??? ㅡ.ㅡ; 별별 상상 다하면서
페이지 속에서 돌아가는 스크립트에 정지걸어서 모든 동작을 확인했었다는.....OTL

덧글

  • 우와와와와 2014/07/24 16:15 # 삭제 답글

    이거때문에 암걸릴뻔했는데 감사합니다 ㅠㅠ
  • 굿!!! 2014/09/01 18:07 # 삭제 답글

    이것 땜에 대머리 될뻔 했어요!
    감사합니다!
  • 아싸! 2015/04/13 13:56 # 삭제 답글

    이것 때문에 고자 될뻔 했어요! 감사합니다 ㅠㅠ
  • 신선한 2017/03/14 15:49 # 삭제 답글

    진짜 감사합니다.
    몇시간의 삽질을 했네요.ㅎ
댓글 입력 영역