샤르의 잡동사니 창고

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

컴퓨터 2011. 7. 8. 18:47

들어가며

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 이벤트 안먹는 버그 보완 클래스

'컴퓨터' 카테고리의 다른 글

블로그 스킨 변경  (0) 2011.07.14
45만원 선 게임용 견적  (4) 2011.07.13
RewriteRule - 이전 주소 접근 시 변경된 주소로 이동시키기  (2) 2011.07.12
공유기(EDIMAX BR-6204Wg)와 시리얼 통신 하기  (0) 2011.07.11
티스토리 초대장을 드립니다. (종료)  (11) 2011.07.08
DD-WRT 공유기에 텍스트큐브 설치하고 포트 포워딩 하기  (4) 2011.07.07
DD-WRT 공유기에서 OPKG 사용하기  (2) 2011.07.06
티스토리 블로그에 구글 맞춤검색 달기 (DIV의 display 이용)  (2) 2011.07.04
티스토리 블로그에 구글 맞춤검색 달기 (iframe 방식)  (2) 2011.07.02
자신의 블로그에 구글 번역 기능 달기  (2) 2011.07.01
현재 브라우저에서는 댓글을 표시할 수 없습니다.
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.
블로그 이미지

안드로이드 앱 개발을 업으로 삼고있는 헬조선 컴돌이의 잡동사니 창고

by Selnis

카운터

Total
Today
Yesterday

최근에 올라온 글

  • 더 보기

최근 댓글

방명록 : 관리자 : 글쓰기
Selnis's Blog is powered by daumkakao
Skin ⓘ material T Mark1 by 뭐하라

ⓒ 2015. Selnis all rights reserved.

favicon

샤르의 잡동사니 창고

안드로이드 앱 개발을 업으로 삼고있는 헬조선 컴돌이의 잡동사니 창고

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 전체 (322)
    • 공지 (4)
    • 잡담 (35)
    • 게임 (150)
    • 컴퓨터 (123)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바