Firefox 에서 한글로 input 입력 시 onkeypress, onkeyup, onkeydown 안 먹는 문제 해결 트릭

들어가며

IE 나 Chrome 에서는 영문, 숫자, 한글과 관계 없이 input에 onkeypress, onkeyup, onkeydown 로 이벤트를 주는 것이 정상 작동합니다만, Firefox(이하: 파폭) 에서 만큼은 한글과 같은 2바이트 문자 입력 시 onkeypress, onkeyup, onkeydown 들이 아예 들어먹질 않습니다.

가령, 한글로 검색어 입력 시 포털들과 같이 자동완성을 띄운다던가, 자동으로 검색이 이루어지게끔 한다던가 하는 것이 onkeypress, onkeyup, onkeydown 만으로는 불가능하단 것이죠.

해결 방법을 찾아 보았으나, JQuery 와 같은 외부 라이브러리를 추가로 이용해서 해결하는 해결책만을 찾았을 뿐인지라, 어설프게나마 이 문제점에 대한 해결 트릭을 찾아 구현해 보았습니다.
(여기서 해결책이 아니라 해결 트릭이라 적은 이유는, 이 방법이 완벽한 해결책인 것은 아니기 때문입니다.)

onfocus, setTimeout 이용

input에 focus가 주어질 경우, 이전에 입력되었던 문장과, 새로 입력된 문장의 차이를 interval 을 통해 비교하고, 차이가 있을 때 강제로 onkeypress, onkeyup, onkeydown 에서 발동 시킬 이벤트와 연결해주면 어느 정도 만족할 만한 효과를 얻을 수 있게됩니다. (별로 바람직한 방법은 아니지만요...)

<script type="text/javascript">
function $(e) {
    return document.getElementById(e);
}

    var searchStr = '';
    function checkText() {
        if (searchStr != $('감시할 input의 id').value) {
            searchStr = $('감시할 input의 id').value;
            // onkeypress, onkeyup, onkeydown 에서 발동 시킬 이벤트
            onEvent();
        }
        setTimeout('checkText()', 100);
    }
</script>

이 방법의 장점은 JQuery나 prototype과 같은 추가적인 라이브러리가 필요치 않다는 것이나, onfocus시에 input의 내용을 감시하는 스크립트가 interval 간격으로 강제 실행된다는 것입니다. 요즘에야 이 정도로 문제가 될 리는 없다고 생각하지만서도.. 결코 깔끔하고 좋은 해결 방식이 아닌 것은 변치 않습니다.

이 방식의 예제는 제 블로그의 검색창을 보시거나, 다음의 예제를 보면 되겠습니다.

예제

다음 input 에 텍스트 입력 시 이 곳의 텍스트도 따라서 변합니다.

input :

jQuery 라이브러리 이용

이 방법은 외부 링크로 대체하겠습니다.
FireFox 에서 한글 onkeypress / onkeyup / onkeydown 이벤트 안먹는 버그 보완 클래스