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초 단위로 계속 발생.

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...