input 에서 엔터 클릭 시 첫번째 button onclick 실행 시.

input 에서 엔터 클릭 시 첫번째 button onclick 실행 시. 막는 방법

원본 : http://blog.daum.net/istae0430/665

* 현상

   form 안에 조회조건 input text와 jQuery-UI의 button이 있다. 
   (form은 onsubmit="return false" 처리되어 있는 상태임)
   input text 에 조회조건을 입력하고 엔터키를 입력하니 button에 바인딩된 함수가 실행되었다.-.-;;
   keycode == 13 이런 이벤트바인딩을 해 준 것도 아닌데 어떻게 이렇게 된단 말인가!!




* 원인규명

   원인을 찾기 힘들었던 이유는 form에 이미 return false가 되어 있기 때문이었다.
   위 현상은 다음과 같은 순서로 동작하는 듯 했다.

   (1) input text 에서 엔터키 입력 => form submit
        (왜 form submit이 발생하는지는 정확히 모르겠다. input이 한 개가 아니어도 동일했다.)

   (2) form 안에 있는 jQuery-UI의 button들 중 첫 번째 것의 onclick 이벤트 발생
        (왜 이렇게 되는지는 모르겠지만 일단 증상을 밝혀보니 그랬다 -.-;)

   (3) form의 onsubmit이 return false 이기 때문에 실제 submit은 일어나지 않았다.



* 해결

   해결책 1.
      - input text 의 onkeydown 이벤트에 return false를 준다. (공통으로 처리해도 될 듯)

==> <input type="text"  name="text1"  id="text1" onkeydown="return Enter_Remove();">

<script type="text/javascript">

function Enter_Remove(){ // input 에서 enter 입력시 다음에 있는 button이 호출되는 현상때문에

// 엔터키의 코드는 13입니다. if(event.keyCode == 13){ return false; } }

</script>

   
   해결책 2. 
      - jQuery-UI의 <button/>을 form 안에 넣지 않는다.



* 참고 

   - <button/> 엘리먼트 사용시에는 type 속성을 반드시 선언해야 한다. (ex: type="button")
      선언하지 않을 경우, 브라우저마다 버튼에 대해 다른 행동을 보일 수 있기 때문이라고 한다.
      (http://www.w3schools.com/tags/att_button_type.asp)