input 요소에 enter키 눌렀을 때 원치않는 submit 막기

예를 들어 input 요소에 값을 입력하고 enter키를 누르면 submit이 되는데, 값을 입력하지 않고도 enter키를 누르면 원치않는 submit이 되는 현상이 발생한다. 해결책은 Javascript로 이벤트를 무효화해주면 된다. form요소가 submit을 처리하므로 form요소에 이벤트를 바인딩해줘야 함

1
2
3
<form name="myForm">
    <input type="text" placeholder="검색어를 입력하세요">
</form>

1
2
3
4
5
document.myForm.addEventListener("keydown", evt => {
    if ((evt.keyCode || evt.which) === 13) {
        evt.preventDefault();
    }
});

keyCode, which는 deprecate될 속성이라고 하니 다음과 같은 방식으로 작성해주자.

1
2
3
if (evt.code === "Enter") {
    evt.preventDefault();
}

code 속성은 IE에서 지원되지 않으므로 key 속성으로 대체할 수 있음.

inline Javascript로 작성할 수도 있다. 구조와 표현의 분리라는 측면에서 봤을 때 좋은 방법은 아니지만 그냥 이런 방법도 있다는 것임.

1
2
3
<form onkeydown="return event.key != 'Enter';">
    <input type="text" placeholder="검색어를 입력하세요">
</form>

See the Pen rNxEvBy by sel (@selucky) on CodePen.

Hero image from Alltechbuzz