FireFox 에서 한글 onkeypress / onkeyup / onkeydown 이벤트 안먹는 버그 보완 클래스
프로그래밍/ETC |
2013. 4. 9. 17:22
ajax 자동 완성을 구현하는데 골머리 아팠던 점은 파폭에서 한글입력시 onkeypress 이벤트가 정상적으로 발생하지 않는다는 점이었다.... 요놈을 어떻게 해야 할지 고민 끝에 꽁수를 하나 생각해 내게 됐다.
input form 에 focus 가 들어간 경우 그 value 값을 반복해서 확인하여 변경 사항이 있을 경우 강제로 keyup 이벤트를 발생시키는 것이었다.
/*
* on-key event fix for FF on Korean input
* fires 'keyup' event when contents of input form change
* requires jQuery 1.2.x
* example: var watchInput = keyFix(inputId);
* author: Hoya, hoya@betastudios.net http://hoya.tistory.com
*/
if (typeof(beta) == "undefined")
_beta = beta = {};
if (typeof(_beta.fix) == "undefined")
_beta.fix = {};
else
alert("keyfix is already set!");
if(typeof(window.beta.instances) == "undefined")
window.beta.instances = new Array();
_beta.fix = function(targetId)
{
// this fix is only for mozilla browsers
if(jQuery.browser.mozilla == false)
return false;
var thisClass = this;
this.keyEventCheck = null;
this.db = null;
this.targetId = targetId;
window.beta.instances[this.targetId] = this;
var focusFunc = function()
{
if(!thisClass.keyEventCheck) thisClass.watchInput();
};
var blurFunc = function()
{
if(thisClass.keyEventCheck)
{
window.clearInterval(thisClass.keyEventCheck);
thisClass.keyEventCheck = null;
}
};
$("#" + this.targetId).bind("focus", focusFunc);
$("#" + this.targetId).bind("blur", blurFunc);
};
_beta.fix.prototype.watchInput = function()
{
if(this.db != $("#" + this.targetId).val())
{
// trigger event
$("#" + this.targetId).trigger('keyup');
}
this.db = $("#" + this.targetId).val();
if(this.keyEventCheck) window.clearInterval(this.keyEventCheck);
this.keyEventCheck = window.setInterval("window.beta.instances['" + this.targetId + "'].watchInput()", 100);
};
* on-key event fix for FF on Korean input
* fires 'keyup' event when contents of input form change
* requires jQuery 1.2.x
* example: var watchInput = keyFix(inputId);
* author: Hoya, hoya@betastudios.net http://hoya.tistory.com
*/
if (typeof(beta) == "undefined")
_beta = beta = {};
if (typeof(_beta.fix) == "undefined")
_beta.fix = {};
else
alert("keyfix is already set!");
if(typeof(window.beta.instances) == "undefined")
window.beta.instances = new Array();
_beta.fix = function(targetId)
{
// this fix is only for mozilla browsers
if(jQuery.browser.mozilla == false)
return false;
var thisClass = this;
this.keyEventCheck = null;
this.db = null;
this.targetId = targetId;
window.beta.instances[this.targetId] = this;
var focusFunc = function()
{
if(!thisClass.keyEventCheck) thisClass.watchInput();
};
var blurFunc = function()
{
if(thisClass.keyEventCheck)
{
window.clearInterval(thisClass.keyEventCheck);
thisClass.keyEventCheck = null;
}
};
$("#" + this.targetId).bind("focus", focusFunc);
$("#" + this.targetId).bind("blur", blurFunc);
};
_beta.fix.prototype.watchInput = function()
{
if(this.db != $("#" + this.targetId).val())
{
// trigger event
$("#" + this.targetId).trigger('keyup');
}
this.db = $("#" + this.targetId).val();
if(this.keyEventCheck) window.clearInterval(this.keyEventCheck);
this.keyEventCheck = window.setInterval("window.beta.instances['" + this.targetId + "'].watchInput()", 100);
};
beta.fix.js 로 저장을 해서
var keyFix = new beta.fix('input_search_all');
식으로 fix를 적용하고자 하는 input form 의 id 값을 넣어 주면 된다.
input form 의 value 가 변할 때 마다 keyup 이벤트를 발생시킨다. (다른 이벤트를 발생시키고자 하는 경우에 trigger 함수의 인자를 변경하면 된다)
jQuery 라이브러리와 함께 사용을 해야 정상작동한다.
출처 : http://hoya.tistory.com/74
'프로그래밍 > ETC' 카테고리의 다른 글
| IP대역 => 숫자로 변환 (0) | 2014.10.30 |
|---|---|
| 하나의 IIS에서 여러 웹사이트 SSL포트(443)를 같이 쓰기 (0) | 2013.03.15 |
| jquery onerror 처리 (0) | 2013.03.15 |
| ADODB.Stream을 이용한 다운로드,파일저장 (0) | 2013.03.15 |
| jquery select 관련정리 (0) | 2013.03.15 |
