파이어폭스의 인기가 전세계적으로 높아지고 있습니다만…

한글 및 기타 아시아권 언어입력시 이벤트 헨들러가 호출되지 않고 있는문제는 아직도 고쳐지고 있지 않습니다..

다들 아시죠???

우리가 흔히 쓰는 입력박스에서의 이벤트 헨들링 -(대표적으로 자동완성기능[서제스트])- 을 하고자 할때 한글을 입력하면 이벤트 헨들러가 호출되지 않는 치명적인 문제가 있습니다..

아래의 버그질라 링크를 보시면 한글 입력시 이벤트 헨들러를 호출할 수 있게끔 하는 작은 트릭을 경험해 보실 수 있습니다.

https://bugzilla.mozilla.org/attachment.cgi?id=240567

문제의 요지는 간단합니다… 한글을 입력할시 파이어폭스의 한글입력기는 글자 조합을 하기위해 value세팅과 이벤트 헨들러 호출을 정지 시킵니다.. 정확히 말해 onkeydown이나 onkeyup이벤트발생시 헨들러가 최초 한번은 호출됩니다. 그러나 한글 조합을 위해 value는 세팅되어 있지 않습니다. 이 문제를 피해가기 위해서는..

1. db라는 가상의 변수를 만듭니다.
2. 현재 입력필드의 value 값이 db의 값과 같은지를 비교합니다..
3. value의 값을 확인합니다.
   3-1. 다르다면 db값을 현재 value로 세팅하고 원래 하고자 했던 이벤트 헨들링을 합니다.
   3-2. 같다면 이벤트 헨들링 코드를 실행하지 않고 넘어갑니다.
4. setTimeout을 이용하여 이벤트 헨들러 자체를 다시 부릅니다. 즉, 재귀적으로 호출합니다. (recursive)

간단히 말해 setTimeout을 이용하여 재귀호출을 할시 브라우저 입장에서는 이벤트가 발생하여 헨들러가 호출되는것이 아닌 일반 함수의 실행으로 간주하게 됩니다. 그렇게하면 세팅된 value를 가지고 이벤트 헨들링을 할 수 있습니다.

재귀적 호출을 계속할 경우 CPU점유율 및 시스템이 불안해 지지 않냐.. 라는 의문을 가지는건 당연합니다. 그렇기 때문에 부담이되는 이벤트 헨들링 코드는 db에 현재 value를 세팅할때 (3-1)만 실행합니다.
이미 같다면 이벤트는 헨들링 된것이고 비교외에 아무것도 실행하지 않았기 때문에 커다란 부담이 되지 않습니다. 만약 그래도 불안하다면 특정동작시 setTimeout 했던것을 clear 하는 코드를 추가해주시면 훨신 안정적으로 돌릴 수 있습니다.. cpu점유율 및 다방면 테스트 결과 트릭을 쓰지 않았을 경우와 큰 차이가 없었습니다.