Table of contents
Overview.
영어 알파벳과 달리 한글은 자음과 모음으로 조합된다. 이 때 한글을 조합 중일 경우에 Enter를 누르게 되면, 이벤트가 두 번 발생하는 현상이 있다. 이를 어떻게 해결하면 될까?
Issue.
한글 입력과 IME.
한글 입력은 다중 문자 언어를 입력할 때 사용되는 IME(Input Method Editor)와 관련 있다. 이 시스템에서 한글을 조합하는 동안 여러 키 이벤트가 발생하게 되는데, Enter 키가 조합 완료 신호로 이용되기 때문에 문제가 발생한다.
- IME 작동 방식: "한"이라는 글자를 입력하기 위해 "ㅎ", "ㅏ", "ㄴ" 키를 차례대로 누름
- Enter 키 이벤트: IME가 현재 입력 중인 문자를 확정 지음 + 실제 입력 완료
Solution.
NativeEvent의 isComposing 프로퍼티를 활용한다. 이 값이 true면 IME가 아직 문자를 조합중에 있다는 거고, false면 조합중이 아니라는 것이다. 따라서 이벤트 핸들러에 아직 조합 중이라면 입력을 막는 컨디션을 추가하면 된다.
if(e.key === 'Enter' && !e.nativeEvent.isComposing) {
// ..
}
Result.
- 한글 입력 후 Enter 쳤을 때, 두 번 입력되는 이유 → IME 때문
- IME 때문에 Enter 이벤트는 두 번 발생 → 조합 완료 신호 + 입력 완력 신호
!e.nativeEvent.isComposing조건 → 조합 미완료시 Enter 키 이벤트 무시
References.
- ［1］isComposing