input 태그를 사용하여 엔터를 누를경우 자동으로 form 태그에 submit 하게 됩니다. 즉, form 태그가 가진 action 속성의 url 주소로 이동하게 되죠. 하지만 만약 엔터를 눌러도 동작 안되게 하는 방법이 있을까요? 아래는 이를 수정하여 엔터를 눌러도 아무런 동작이 안되게 하는 방법입니다.

먼저 어떤 폼형식의 태그가 있다고 가정하면 일반적인 코드는 아래와 같습니다.

<form id="form">
   <input id="testEle" />
   <button id="button">Click</button>
</form>


여기서 잠깐... 사용자 입장에서는 엔터키를 눌러 submit()되면 더 편리하지 않나요?라고 물을 수 있습니다. 물론 맞는 말입니다.

하지만 그것은 개발자가 의도하였을 경우의 말입니다. 따로 submit을 위한 버튼이 없어도 되기 때문입니다. 하지만 문제는 의도하지 않은 경우 발생합니다. 다시말해 입력된 값이 바로 submit 되는 것이 아니라 입력값에 따라 양식이 전달되거나 안되게 하는 경우가 발생할 수도 있겠죠.

간단하게 예를들면 잘못입력된 전화번호를 누른 경우 원치않는 submit이 발생되지 않도록 하기 위해 수정이 필요합니다.

모든 브라우저에서 위와 같은 현상이 발생합니다. 이를 수정하기 위한 방법으로 똑같은 input 태그를 넣어주는 방법이 가장 많이 쓰이고 있습니다. 이때 넣어준 다른 input 태그는 display 스타일 속성을 none으로 하여 보이지 않게 해주는 방법으로 매우 간단합니다. 그럼 아래 코드를 참고하세요.


! input 태그 엔터키 누를시 submit 자동되는 문제 해결법


특별히 다른 코드를 예제로 만들지 않고 위 코드에 수정하기 위한 코드를 추가해보았습니다. 해당 코드는 input 태그 아래에 또 다른 input 태그를 하나 더 추가한 모습입니다. 그리고 style 속성값에 display: none을 주었습니다. 이 경우 코드는 추가했습지만 방문자에게는 보여지지 않게됩니다.

<form id="form">
   <input id="testEle" />
   <input style="display:none;" />
   <button id="button">Click</button>
</form>

가장 간단한 방법으로 원하는 기능을 수행하게 되었습니다. input 태그 하나 더 추가했을뿐인데 말이죠. 이 방법 외에도 어떤 방법이 있을까요? 엔터 버튼을 무모화 시키는 방법이 존재할 것입니다. 이 경우 엔터에 대한 이벤트를 감지하여 함수를 실행해야하므로 더 복잡할 것입니다. 이 방법은 쉬우면서 가장 간단한 방법이라 생각됩니다.