[Javascript] 한글 입력 후 엔터 입력 시 끝글자 중복 문제 해결

채팅 도메인을 개발하면서 한글 입력 후 엔터를 눌러 전송하면 위와 같이 끝 글자가 중복해서 입력되는 문제가 있었다.

알고보니 한글은 영어와 달리 자음과 모음을 조합하는 문자이기 때문에 발생하는 현상이었다.

해결방법은 간단하다.
 
 

$(".type_msg").keydown(function (e) {
    if (e.key === "Enter") {
        $('.send_btn').click();
        e.preventDefault();
    }
});

 
위는 원래 작성했던 코드이다.

위에 keydown을 keypress로 바꿔주면 해당 현상이 발생하지 않는다.

하지만 keypress는 현재 deprecated 되어있으니 가급적 다른 방법을 사용하는 것이 좋다.
 
 

document.getElementsByClassName("type_msg")[0].addEventListener("keydown", (e) => {
    console.log(e.isComposing);
    if (e.key === "Enter") {
        if (e.isComposing == false) {
            $('.send_btn').click();
            e.preventDefault();
        }
    }
});

 
KeyboardEvent의 isComosing 속성을 이용하면 입력한 키가 조합문자인지 확인할 수가 있다.

위와 같이 작성한 후 console을 확인해보면 한글 입력 시 true 가 찍힌다.

false 일 때만 원하는 동작을 수행하게 하면 된다.
 
 
 
 
 

정상적으로 동작하는 모습