한글 입력시 KeyDown Event 두번 발생

TypeScript, NextJs, React 개발시 Input에 한글 입력 후 Enter로 이벤트처리시 이벤트가 두번 발생되는 현상이 나타났다.

  const msgEventHandler = (event: KeyboardEvent<HTMLElement>) => {

    let msgInput = event.target as HTMLInputElement;
    if (event.code === "Enter") {
      event.preventDefault();
      console.log("input msg", mbox.msgInput);
    }
    
 
     <input
      type="text"
      onKeyDown={msgEventHandler}
    />

위의 코드로 개발시Enter를 입력 할때마다

input msg 입력값

input msg 입력값

이렇게 되었다.

 

원인

한글은 영문과 숫자와는 다르게 Key Event가 하나의 문자가 아니다.

예를 들어 "한"이란 문자는 "ㅎ", "ㅏ", "ㄴ" 이렇게 3번의 입력이 있어야 한다.

브라우져는 문자가 완료가 안되어도 KeyEvent가 발생이 된다.

문자가 완료되지 않은경우 Event isComposing값이 True로 된다.

 

해결 법

Event.nativeEvent.isComposing의 값을 체크 하여 값이 False일때만 처리 하면 된다.

  const msgEventHandler = (event: KeyboardEvent<HTMLElement>) => {
    console.log(event.nativeEvent.isComposing);

    let msgInput = event.target as HTMLInputElement;
    if (event.code === "Enter" && !event.nativeEvent.isComposing) {
      event.preventDefault();
      console.log("input msg", msgInput.value);
    }
    
 
     <input
      type="text"
      onKeyDown={msgEventHandler}
    />

 

모두들 해결을 잘 하시길