onkeyup 이벤트 관련 함수 두번 호출되는 문제

pickylemon·2024년 7월 13일

Exception 모음

목록 보기
31/31

상황

  • 채팅방에서 메시지를 입력후 엔터키를 눌러도 전송버튼을 누른 효과가 발생하도록 구현 중이었다.
  • 눌린 키가 엔터키라면, 전송버튼 클릭 이벤트를 발생시키도록 코드를 작성했는데..
    function clickSubmit(e){
    	if(e.code === 'Enter') {
    		document.querySelector('#submitBtn').click();
    	}
    }
  • 영어, 특수문자 입력에서는 이상이 없는데
    한글만 입력하면 함수가 두번 호출되는 것처럼 보인다.

원인 및 해결

  • 특정 환경에서 한글을 처리하는 과정 중에 발생할 수 있는 문제라고 한다.
  • 아래 코드를 추가함으로써 위의 현상을 없앨 수 있었다.
    function clickSubmit(e){
    	//한글 입력시 두번 호출되는 현상을 방지하기 위해 추가
    	if (e.isComposing || e.keyCode === 229) return;
    	
    	if(e.code === 'Enter') {
    		document.querySelector('#submitBtn').click();
    	}
    }
    

[참고]

profile
안녕하세요

0개의 댓글