(input.type=text) 엔터 시 submit 되는 상황 방지

설명

form 태그 안에서 input 태그에서 엔터를 누를시 submit 되는 상황을 방지하려면 onKeyDown 이벤트에서 엔터 키를 눌렀을때만 기존 이벤트 동작을 막아주어 처리한다.

• onKeyDown : 키가 입력되었을 때 작동하는 이벤트 핸들러
• event.key : 입력된 키
• event.preventDefault() : 기본 이벤트 동작을 실행하지 않는 메서드

코드

// event.keyCode, event.which 사용을 권장하진 않는다.
<input onKeyDown={(event) =>  event.key  ===  'Enter'  &&  event.preventDefault()} />
<input onKeyDown={(event) =>  event.keyCode  ===  13  &&  event.preventDefault()} />
<input onKeyDown={(event) =>  event.which ===  13  &&  event.preventDefault()} />