조합문자 입력 중 input event에서 focus 이동 후 입력 시 이전 조합문자가 같이 입력되는 문제

분석

• 현재 브라우저 버그의 경우 input element event 작업 간 확인되었습니다.
• input event에서 조합문자 입력 중 focus()로 다른 element를 이동 시 compositionend event가 발생
• window7에서 현상 미발생
• chrome 75~최신버전 확인한 결과 현상발생
• 일본어, 한국 입력 시 이전 조합문자가 같이 입력되는 현상 확인

현상

• 현상 확인의 경우 하단의 iframe 또는 샘플링크에서 확인 가능합니다 (샘플)

• 일본어의 경우 해당 샘플의 input event에서 "고"를 체크하는 조건문을 value.length로 체크하도록 변경 시 확인 가능합니다.
• 현재, focus() 이동 시 compositionend event가 발생하여 조합완료처리가 되었지만 이후 조합 가능한 문자(자음)를 입력 시 이전 조합문자에 이어져서 입력됩니다.

해결방안

1. callback처리

   • 현재 focus 이동의 경우 바로 수행하는데 이 부분을 callback으로 처리 시 현상이 발생하지 않는 것을 확인하였습니다.

2. keyup event에서 focus() 이동

   • input event가 아닌 keyup event에서 focus 이동 시 현상 미발생 확인하였습니다.