form 태그에서 enter 제출 방지 (keydown 예외처리)

문제상황

form 태그에서 엔터를 입력하면 form이 제출되는 문제가 있음

제출은 버튼을 눌러야 가능하도록 하고 엔터 입력시에는 제출이 안되도록 방지하고 싶음!

/**엔터시 폼제출 방지 */
export const enterKeyDown = (event) => {
  if (event.key === "Enter") {
    event.preventDefault(); // Enter 키의 기본 동작을 막음
  }
};

그때는 이렇게  event.preventDefault() 를 추가해주면 된다.

 

여기서 발생한 추가적인 문제

form 태그 안에 있는 textarea에도 onkeyDown이 적용되어 textarea에서 줄바꿈(enter)가 먹히지 않는 오류가 생겼다..

<form onSubmit={handleSubmit(onSubmitClinic)} onKeyDown={enterKeyDown}>
//폼태그에 keydown이벤트에 걸었더니 
//폼 안에있는 textarea에서 enter가 먹히지 않는 오류 발생

 

해결

이벤트 타겟이 textarea가 아닌 경우에만 엔터 이벤트를 방지한다.

/**엔터시 폼제출 방지 */
export const enterKeyDown = (event) => {
  // textarea 안에서는 Enter 키를 허용
  if (event.key === "Enter" && event.target.tagName !== "TEXTAREA") {
    event.preventDefault(); // Enter 키의 기본 동작을 막음
  }
};

 

 

콘솔로 찍어보면 event.target은 해당 이벤트가 발생하는 엘리먼트

event.target.tagName은 TEXTAREA를 반환하는 것을 확인할 수 있다.