input 태그 엔터키를 누를 경우 자동으로 submit 안되게 하기

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

# form 태그  input 누를 경우 submit 안 되도록 하기

form 태그 내부의 input 엔터를 입력해도 아무런 동작이 안되도록... 즉 submit 되지 않도록 하는 방법입니다. 먼저 아래와 같은 폼 형식의 태그가 있다고 가정합니다.

방법을 알기에 앞서서 아래의 의문이 있을 수 있죠.

? 그런데 엔터키를 눌러서 submit되는게 더 좋지 않을까

사용자 입장에서는 엔터키를 눌러 submit()되면 더 편리하지 않나요?라고 물을 수 있습니다. 물론 맞는 말입니다. 다만 기획 의도 및 개발자가 의도가 있는 경우입니다. 문제는 의도하지 않은 경우에도 submit되는 경우가 문제입니다. 예를들어 잘못 입력된 전화번호를 누른 경우 원치 않는 submit이 발생되지 않도록 중간에 validation을 추가하였을 수도 있죠. 이 과정을 위해서 submit을 제외할 필요가 있습니다.

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

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

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

가장 간단한 방법으로 원하는 기능을 수행하게 되었습니다. input 태그 하나 더 추가했을뿐인데 말이죠.

! 마치면서

이 방법 외에도 어떤 방법이 있을까요? 엔터 버튼을 무모화 시키는 방법이 존재할 것입니다. 즉 키이벤트(onkeypress 또는 onkeydown)를 추가하여 엔터에 대한 이벤트를 감지해 동작하지 않도록 할 수 있겠죠. 이 방법은 쉬우면서 가장 간단한 방법이라 생각됩니다.


다른 방법으로는 비동기식 ajax 호출하는 방법입니다. ajax로 호출하면 submit 자체가 필요없이 비동기로 값을 전달할 수 있겠습니다. 최근에는 비동기 ajax가 많이 사용되어 위와 같은 이슈 해결은 많이 필요가 없게되었습니다.