form에 input type=text가 1개있을때 엔터누르면 submit이 되는 현상

이번에 로그인페이지를 만들면서 입력받는곳이 한군데만 있는데

엔터를 누르면 Submit이 되는거 같더군요.

 

1. 제가 사용한 소스

<form name="actFrm" id="actFrm">

     <input type="text" name="userID" id="userID" /><br />

     <input type="button" value="CHECK!" onClick="return goCheck();" />

</form>

 

2. 다른 소스-1

<form name="actFrm" id="actFrm">

     <input type="text" name="userID" id="userID" />

     <input type="text" name="userPWD" id="userPWD" /><br />

     <input type="submit" value="CHECK!" onClick="return goCheck();" />

</form>

 

3. 다른 소스-2

<form name="actFrm" id="actFrm">

     <input type="text" name="userID" id="userID" />

     <input type="text" name="userPWD" id="userPWD" /><br />

     <input type="button" value="CHECK!" onClick="return goCheck();" />

</form>

 

1번은 엔터 클릭시 아무 반응이 없어야 하는데 반응이 생기고

2번은 type="submit"이니까 엔터클릭시 goCheck() 함수를 실행

3번은 type="button"이니까 엔터클릭시 아무 반응이 없음.

type="text"가 1개있을때 엔터를 누르면 반응이 생기는게 이상해서

인터넷 검색을 해보니 Outsider's Dev Story 에 관련 내용이 잘 설명되어있네요.

 

해결 방법은 두가지가 있습니다

1. 스크립트를 통해서 엔터클릭을 막는 방법

2. html 만으로 제어하는 방법

 

저는 html만으로 제어하는게 심플해서 2번방법을 사용하고 있습니다

<input type="text" style="display:none;" />

위처럼 type="text"를 1개더 만들면 그런 현상이 없어지네요. 후훗~