input 입력폼 엔터키 누를 경우 submit 막기, prevent

입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다. 어떻게 하면 가능할까요?

# input 태그 엔터 submit 방지하는 방법

input 태그에 엔터를 입력하면 값이 전송되는 기능은 어떻게 보면 매우 편리합니다. 하지만 입력 값을 검증하거나 이전에 다른 함수, 기능이 실행되야하는 경우 이를 방지해야하는데요 ~~ 이 때 몇 가지 방법이 존재합니다. 하나씩 알아보겠습니다.


i. form 태그를 제거하기
먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다. 예를들어 ajax 비동기 통신인 경우 form 태그가 없어도 구현에는 문제가 없습니다.

@ 수정 이전 코드

@ 수정 이후 (form 태그를 div로 변경)

위와 같이 form을 div 등으로 바꾸거나 아니면 제거할 수도 있습니다.


ii. input 태그 앞에 input 태그 추가 후 숨기는 방법
이 방법도 잘 알려진 방법인데 입력하는 input 태그 앞에 추가로 input 태그를 추가하고 숨기는 방법입니다. 많이 쓰이는 방법이니 참고하세요.

@ 수정 이전 코드

@ 수정 이후 코드

앞에 input 태그만 추가했을 뿐인데 엔터 입력시 submit 되지 않습니다.


iii. keydown이벤트 추가 후 엔터키 이벤트 제거하기
다른 방법으로는 이벤트를 제어하는 방법입니다. 즉, 엔터키를 누르면 브라우저 기본 이벤트가 발생해 submit 되는데 이를 방지하는 방법이죠. key 이벤트를 만들고 엔터가 발생시 event.preventDefault()를 코드에 추가합니다.

@ 모든 엘리먼트에 적용하기


@ input 태그에만 적용하기(jQuery를 사용)
위와 동일하나 input 태그만 찾아서 방지 하는 방법입니다.


여기까지 엔터키 입력시 submit 되는 것을 방지하는 방법입니다. 요즘은 비동기식 호출이 많아 제거하는 경우가 더욱 많은 것 같습니다.