IE10 이하, input 엘리먼트에서 엔터 입력 시 기본 액션

발생일: 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();

    }

  });