JS
(input.type=text) 엔터 시 submit 되는 상황 방지
spare8433
2023. 6. 19. 20:32
설명
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()} />