한글 입력시 이벤트 중복 호출 해결 방법

한글 입력시 이벤트 중복 호출 해결 방법

 

cjk(중국어, 일본어, 한국어) 문자는 브라우저에서 처리하는 과정이 한 단계 더 필요하다.

따라서 한국어 입력시 이벤트가 중복 호출되는 현상이 생긴다.

이를 해결하기 위해 isComposing 이라는 이벤트 속성을 사용한다.

isComposing 은 글자가 조합 중인지 boolean을 반환한다.

 

아래는 isComposing 사용 예시다.

const inputEl = document.querySelector('input');
inputEl.addEventListener('keydown', event => {
	if(event.key === 'Enter' && !event.isComposing){
	  console.log(event.isComposing);
	  console.log(event.target.value)
  }
});

See the Pen isComposing by sunghee (@dimorin) on CodePen.

if 조건에 !event.isComposing 이 없으면 한글 입력시 조건문 안에 내용이 두 번 실행된다.