2012년 1월 27일 금요일

Android에서 JavaScript 한글 onKeyUp Event 문제


Android Webview 뿐만 아니라 특정 브라우저에서도 한글 입력시 javascript keyup Event가 잡히지 않는 문제가 있습니다.


예를 들어 Twitter의 140글자를 Check 처럼 Web의 “textarea”에 한글을 입력 할 경우에 keyup event을 잡지 못하는 것 처럼 말입니다. 물론 iPhone 계열에서는 keyup Event가 잘 잡힙니다.

Googling 해서 여러 방법을 찾아 보고 최선의 방법을 여기 적습니다.

JavaScript Object “Observe”는 timer로 주기적으로 특정 form을 check하여 “keyup” Event을 발생 시킨다.

Observe.js
var Observe = function(oEl) {
 this._o = oEl;
 this._value = oEl.value;
 this._bindEvents();
};
Observe.prototype._bindEvents = function() {
 var self = this;
 var bind = function(oEl, sEvent, pHandler) {
   if (oEl.attachEvent) oEl.attachEvent('on' + sEvent, pHandler);
   else oEl.addEventListener(sEvent, pHandler, false);
 };
 bind(this._o, 'focus', function() {
  
   if (self._timer) clearInterval(self._timer);
   self._timer = setInterval(function() {

     if (self._value != self._o.value) {
       self._value = self._o.value;
       self._fireEvent();
     }
    
   }, 50);
  
 });
 bind(this._o, 'blur', function() {
  
   if (self._timer) clearInterval(self._timer);
   self._timer = null;
  
 });
          
};
Observe.prototype._fireEvent = function() {
        
 if (document.createEvent) {
  
   var e;
  
   if (window.KeyEvent) {
    
     e = document.createEvent('KeyEvents');
     e.initKeyEvent('keyup', true, true, window, false, false, false, false, 65, 0);
    
   } else {
    
     e = document.createEvent('UIEvents');
     e.initUIEvent('keyup', true, true, window, 1);
     e.keyCode = 65;
    
   }
  
   this._o.dispatchEvent(e);
  
 } else {
  
   var e = document.createEventObject();
   e.keyCode = 65;
  
   this._o.fireEvent('onkeyup', e);
  
 }
};


Observe.js 사용 예
<script src="Observe.js"></script>
<script type="text/javascript">
   $().ready(function() {
       new Observe(document.getElementById('search_head'));
   });

$('#search_head').bind('keyup', function(event, ui) {
.. 실행 Script
});

</script>
<div id="searchCondition" class="srchBar" style="height: 45px; padding-top: 10px;">
   <input id="search_head" name="search_head" type="search">
</div>


문제는..
Observe.js에 0.5초 단위로 timer을 설정하였다. 결국 keyup Event가 0.5초 단위로 계속 발생.

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...