티스토리 뷰

발생일: 2014.11.21

키워드: IE8, IE9, IE10, input, 인풋, 엔터, enter

문제:
IE10 이하에서 input 이벤트에 아무 이벤트를 달아두지 않았는데 엔터를 입력하면 뭔가가 실행된다.

기본적으로 input 이벤트에서 엔터를 입력했을 때의 기본 액션이 form submit 이란 걸 알고는 있었다.
예를 들어, 아래처럼 <form> 태그 안에 <input>이 있을 경우, input 에서 엔터를 입력하면 상위 form의 서브밋이 수행된다.

<form>
  <input type=“text”>
</form>


근데, 이번 input 은 주변에 form 엘리먼트도 없다.

얼라… 왜일까…?



해결책:

IE10 이하에서는 input 엘리먼트에 엔터가 입력되면 가장 가까운 버튼이나 앵커에 click 이벤트가 적용된다.
신기한 건, 버튼이 상위에 존재하는 게 아닌 경우에도 그렇다는 거다.

아래 코드를 보면 쉽게 이해할 수 있다.

  <div>
    <div>
      <input type=“text”>
    </div>
    <div>
      <button onclick=“alert(1);”>버튼</button>
    </div>
  </div>


위와 같은 구조에서 <input>에서 엔터를 입력하면 <button> 태그의 onclick 이벤트를 통해 alert() 이 수행된다.
신기한 일이다. -_-;;

물론, 상위에 <form> 이 있을 경우엔, 이 <form> 의 서브밋 수행이 우선순위를 갖는다.


특별히 input 영역의 컨트롤을 제어하고 있지 않다면, 아래처럼 기본 엔터 동작은 막아줘야겠다.

  $(‘input’).on(‘keydown’, function (e) {
    if (e.keyCode === 13) {
      e.preventDefault();
    }
  });


반응형
댓글
공지사항