Frontend

[Javascript] textarea 엔터키로 전송 시 엔터값 남아있는 현상 해결

정 효 2024. 7. 5. 21:10

채팅 도메인을 개발하면서 채팅 메세지를 입력하는 textarea 태그에 엔터키 입력 시 전송 버튼을 누르도록 코드를 작성하였는데 전송하고 나면 엔터값이 남아있는 걸 발견하였다.

 

 

입력 전 textarea

 

 

텍스트 입력 및 엔터로 전송

 

 

입력 후 textarea

 

 

const $inputMessage = $(".type_msg");
$inputMessage.keydown(function(event) {
    if (event.key === "Enter") {
            $('.type_msg').focus();
            $('.send_btn').click();
            event.preventDefault(); //엔터 입력 방지
    }
});

간단하게 event.preventDefault()를 사용하여 enter 키를 입력했을 때 기본 이벤트를 방지해주면 해결된다.