javascrip 中 onkeyup 事件在输入法情况下不稳定的山寨解决方案【有代码】

 

    E8前一次版本升级提供了拼音智能快速输入的控件，但客户发现了一个不太好用的地方，中文输入法进行中文输入的时候 onkeyup事件不稳定，很多时候取不到，网上一查，这个问题还是一个普遍存在的问题。

   在IE中触发keydown和keyup, 不触发keypress
输入值能够获得，但不稳定。有时候会延后
   在Firefox:触发keydown和keypress, 不触发keyup
输入值未能获得 [Enter]后会触发keyup, 可获得输入值
   在Opera中keydown, keypress和keyup都不触发，输入值也未能获得
[Enter]后，在opera 9.24中会触发keydown和keypress
输入过程中，Space和enter会触发三者

   对于一个控件需要适合在各种环境上运行的，既然存在这样的一些区别，因此实现方式应该更加巧妙一些，这个问题一直困扰了好几天，后来在网上有人推荐了google的脚本文件http://www.google.cn/ac.js 虽然脚本做了干扰处理，但还是能看出它的一些思路，由于控件还有其它功能需求，不能直接照搬这个脚本文件，于是想到了一个山寨的解决方案。（感觉还是没有google流畅，但比以前的版本好很多了）

    主要思路是：

        不用onkeyup事件，改为 在 onfocus 时设置 setInterval 自动处理的机制判断是否有新的输入值， onblur时通过 clearInterval(oTimer) 方法取消自动处理。

     用到的技术点有几个

       1、用匿名函数的方法为 setInterval  传递参数，注意对象的直接传入会有问题，先传入控件的ID，找到后再传递给匿名方法

       2、如果发现有不同的输入值的时候，利用XMLHTTP获取列表

       3、缓存已经获得过的列表，减少后台操作

       4、用动态的div 和 select 动态展示列表

       5、利用键盘事件选择对应的值

       6、处理特定场景下的特定键值，防止浏览器发生不意愿的动作

      

      主要的技术点是以上几点，写脚本是个细致活，再有什么问题再继续完善了。

       脚本文件如下： 希望能给到大家参考

      

//应用开发的基础脚本函数：获取下拉列表快速输入,2008-04-16 苏  2009-02-09 孔修改
    var xmlDroplst = new ActiveXObject("Msxml2.DOMDocument.3.0");  //客户端XML对象
    var arrDroplstID;
    arrDroplstID = new Array();     //缓存已经XMLHTTP获取过的ID
    var arrDroplstValue;
    arrDroplstValue = new Array();
    var iDroplstSavedCont = 0;
    var objOldValue = "";    //保存控件原来的值
    var xmlhttpDroplst = null; 
    var currTextBoxID = "-1";
    var currDivID = "-1";
    var currOpendDivName = "";
    var oTimer;
    // 设置自动检查输入并获取列表
    function SetInputCheckValid(id,idSelect,idText,idFields,obj)
    {
        var args=[];
        var object = document.getElementById(id);
        var objSelect = document.getElementById(idSelect);
        var objText = document.getElementById(idText);
        args.push(id);
        args.push(object);
        args.push(objSelect);
        args.push(objText);
        args.push(idFields);
        args.push(objText);
        oTimer =  setInterval(function(){
                                AutoGetItems.apply(this,args);
                               },400);
        }
        
    function SetInputCheckDisable(){clearInterval(oTimer);}
    function AutoGetItems(id,object,objSelect,objText,idFields,obj)
    {
         var i = 0;
         var j=0;
         var sCurr = '';
         var soptText='';
         var blnAdd = false;
         var xmlDroplst = new ActiveXObject("Msxml2.DOMDocument.3.0");  //客户端XML对象
         if(objText != null){sCurr = objText.value;}
        //为空，清除 退出
        if(sCurr == "")
        {
              //清除现有内容
            if(objSelect != null)
               objSelect.options.length = 0;  //清除内容
            return;
        }
        //值相同则退出
        if(sCurr == objOldValue)
            return;
        objOldValue = sCurr;
        var sXml  = getXmlHttpFields(idFields + "_" + escape(sCurr));
        if(sXml != "-1")
        {
            //从缓存中获取到
            if(object != null)
            {
                if(sXml=="")  //没有
                {
                    xmlDroplst.loadXML("<Root></Root>");
                }
                else
                {
                    xmlDroplst.loadXML(sXml);
                 }
                var nodes = xmlDroplst.documentElement.childNodes;
                if(objSelect != null)
                {
                   objSelect.options.length = 0;  //清除内容
                   for (i=0;i<nodes.length;i++)
                   {
                        soptText = nodes(i).getAttribute("Text");
                        //动态获取的情况，所以的内容是从后台筛选过的
                        objSelect.add(document.createElement("OPTION"));
                        objSelect.options[j].text= soptText;
                        objSelect.options[j].value=j; 
                        j++;
                    }
                }
                if(j >0)
                  {
                     //存在时显示
                     object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";       
                     object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px"; 
                     object.style.width = obj.offsetWidth + 2 + 'px';
                     hideMe(id,'');
                     currOpendDivName = id;
                  }
            }
        }
        else
        {
           if( sCurr != "")
           {
                //异步获取
                if(xmlhttpDroplst == null)
                     xmlhttpDroplst = CreateDroplstXmlHttpObject();       
                if(xmlhttpDroplst != null)
                {
                    try
                    {    
                        xmlhttpDroplst.open("GET", "../Common/frmXmlHttpDroplst.aspx?id=" + idFields + "&curr=" + escape(sCurr), true); 
                        //window.open("../Common/frmXmlHttpDroplst.aspx?id=" + idFields);
                        xmlhttpDroplst.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded "); 
                        xmlhttpDroplst.onreadystatechange = function() 
                                                    { 
                                                        if ( xmlhttpDroplst.readyState==4 ) 
                                                        {   
                                                            sXml = xmlhttpDroplst.responseText;
                                                            
                                                            if(sXml=="")  //没有
                                                            {
                                                                xmlDroplst.loadXML("<Root></Root>");
                                                            }
                                                            else
                                                            {
                                                                xmlDroplst.loadXML(sXml);
                                                            }
                                                            //缓存这次结果
                                                            arrDroplstID[iDroplstSavedCont] = idFields + "_" + escape(sCurr);
                                                            arrDroplstValue[iDroplstSavedCont] = sXml;
                                                            iDroplstSavedCont++;
                                                            if(object != null)
                                                            {
                                                                var nodes = xmlDroplst.documentElement.childNodes;
                                                                if(objSelect != null)
                                                                {
                                                                   objSelect.options.length = 0;  //清除内容
                                                                   for (i=0;i<nodes.length;i++)
                                                                   {
                                                                        soptText = nodes(i).getAttribute("Text");
                                                                        //动态获取的情况，所以的内容是从后台筛选过的
                                                                        objSelect.add(document.createElement("OPTION"));
                                                                        objSelect.options[j].text= soptText;
                                                                        objSelect.options[j].value=j; 
                                                                        j++;
                                                                        
                                                                    }
                                                                }
                                                                if(j >0)
                                                                  {
                                                                     //存在时显示
                                                                     object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";       
                                                                     object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px"; 
                                                                     object.style.width = obj.offsetWidth + 2 + 'px';
                                                                     hideMe(id,'');
                                                                  }
                                                            }
                                                            
                                                         }
                                                    }   
                          xmlhttpDroplst.send(null);   
                     }
                     catch(e3)
                     {
                     }
               }
           }
       }
    }
    
    setInterval("AutoCloseDiv()",3000);
    function setInputID(idText){currTextBoxID = idText; }
    function setInputIDNone(){currTextBoxID = "-1"; }
    function AutoCloseDiv()
    {
        if(currTextBoxID == "-1" && currDivID == "-1")
        {
            try{hideMe(currOpendDivName,"none");}catch(e3){}
        }
    }
    function CreateDroplstXmlHttpObject()
    {
        try  
        {  
            xmlhttpDroplst = new ActiveXObject("MSXML2.XMLHTTP");  
        }  
        catch(e)  
        {  
            try  
            {  
                xmlhttpDroplst = new ActiveXObject("Microsoft.XMLHTTP");  
            }  
            catch(e2){}  
        }
        return xmlhttpDroplst;
    }
    function focusToDropDown(idSelect)
    {
         if(event.keyCode == 40)
         {
            var objSelect = document.getElementById(idSelect);
            if(objSelect != null)
            {   try
                {
                   //有控件不可见的情况
                    objSelect.focus();
                    if(objSelect.lenght > 0)
                        objSelect.options[0].selected = true;
                 }
                 catch(e1)
                 {
                 }
            }
         }
    }
    function MoverToDropDownLayer(idSelect)
    {
            var objSelect = document.getElementById(idSelect);
            if(objSelect != null)
            {   
                 try
                {
                   //有控件不可见的情况
                    objSelect.focus();
                    if(objSelect.selectedIndex == -1)
                        objSelect.selectedIndex = 0;
                        
                    currDivID = idSelect;
                }
                 catch(e1)
                 {
                 }
            }
    }
    function absoluteLocation(element, offset) 
    { var c = 0; while (element) {  c += element[offset];  element = element.offsetParent; } return c; 
    } 
    function getSelectedLabel(id,idText,obj) 
    {  
         var opt = obj.options[obj.selectedIndex]; 
         hideMe(id,'none'); 
         var objText = document.getElementById(idText);
        if(objText != null)
        {
            objText.value = getIdiomDeal(opt.text);
        }
    } 
    function getIdiomDeal(s)
    {
        var sRet = s;
        if(typeof(getUserIdiomDeal) !="undefined")
        {
            sRet = getUserIdiomDeal(s);
        }
        return sRet;
    }
    function selectOnReturn(id,idText,obj)
    {
       if(event.keyCode == 8)
          event.keyCode = null;
       if(event.keyCode==13)
       {
            event.returnValue = false;
            getSelectedLabel(id,idText,obj);
        }
    }
    function hideMe(id,status)
    {
        var object = document.getElementById(id);
        if(object != null)
        {
            object.style.display = status;
            if(status == "none")
            {
                currDivID = "-1";
                currTextBoxID = "-1";
            }
        }
    }
    function getItemsForDropdown(id,idSelect,idText,idFields,obj)
    {
         var object = document.getElementById(id);
         var objSelect = document.getElementById(idSelect);
          var objText = document.getElementById(idText);
          var objFields = document.getElementById(idFields);
         var i = 0;
         var j=0;
         var sCurr = '';
         var soptText='';
         var blnAdd = false;
         
         if(objFields != null)
         {  var sXml = objFields.value;
            xmlDroplst.loadXML(sXml);
         }
         if(objText != null){ sCurr = objText.value; }
        if(object != null)
        {
            var nodes = xmlDroplst.documentElement.childNodes;
            if(objSelect != null)
            {
               objSelect.options.length = 0;  //清除内容
               for (i=0;i<nodes.length;i++)
               {
                    soptText = nodes(i).getAttribute("Text");
                    blnAdd = false;
                    if(sCurr == '')
                    {
                       blnAdd = true;
                    }
                    else
                    {
                       if(soptText.toUpperCase().indexOf(sCurr.toUpperCase()) == 0)
                         {
                            blnAdd=true;
                         }
                    }
                    if(blnAdd == true)
                    {
                        objSelect.add(document.createElement("OPTION"));
                        objSelect.options[j].text= soptText;
                        objSelect.options[j].value=j; 
                        j++;
                        
                    }
                }
            }
            object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";       
            object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px"; 
            object.style.width = obj.offsetWidth + 2 + 'px';
            hideMe(id,'');
            currOpendDivName = id;
        }
    }
    //来源于XMLHTTP异步获取,***未改***
    function getItemsForDropdownXmlHttp(id,idSelect,idText,idFields,obj)
    {
         var object = document.getElementById(id);
         var objSelect = document.getElementById(idSelect);
          var objText = document.getElementById(idText);
         var i = 0;
         var j=0;
         var sCurr = '';
         var soptText='';
         var blnAdd = false;
         var xmlDroplst = new ActiveXObject("Msxml2.DOMDocument.3.0");  //客户端XML对象
         
         if(objText != null){sCurr = objText.value;}
        var sXml  = getXmlHttpFields(idFields);
        if(sXml != "-1")
        {
            //从缓存中获取到
            if(object != null)
            {
                if(sXml=="")  //没有
                {
                    xmlDroplst.loadXML("<Root></Root>");
                }
                else
                {
                    xmlDroplst.loadXML(sXml);
                 }
                var nodes = xmlDroplst.documentElement.childNodes;
                if(objSelect != null)
                {
                   objSelect.options.length = 0;  //清除内容
                   for (i=0;i<nodes.length;i++)
                   {
                        soptText = nodes(i).getAttribute("Text");
                        blnAdd = false;
                        if(sCurr == '')
                        {
                           blnAdd = true;
                        }
                        else
                        {
                           if(soptText.toUpperCase().indexOf(sCurr.toUpperCase()) == 0)
                             {
                                blnAdd=true;
                             }
                        }
                        if(blnAdd == true)
                        {
                            objSelect.add(document.createElement("OPTION"));
                            objSelect.options[j].text= soptText;
                            objSelect.options[j].value=j;  
                            //objSelect.options[j].className = "combo-item";
                            j++;
                        }
                    }
                }
                if(j >0)
                  {
                     //存在时显示
                     object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";       
                     object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px"; 
                     object.style.width = obj.offsetWidth + 2 + 'px';
                     hideMe(id,'');
                     currOpendDivName = id;
                  }
            }
        }
        else
        {
            //异步获取
            if(xmlhttpDroplst == null)
                 xmlhttpDroplst = CreateDroplstXmlHttpObject();       
            if(xmlhttpDroplst != null)
            {
                try
                {    
                    xmlhttpDroplst.open("GET", "../Common/frmXmlHttpDroplst.aspx?id=" + idFields, true); 
                    //window.open("../Common/frmXmlHttpDroplst.aspx?id=" + idFields);
                    xmlhttpDroplst.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded "); 
                    xmlhttpDroplst.onreadystatechange = function() 
                                                { 
                                                    if ( xmlhttpDroplst.readyState==4 ) 
                                                    {   
                                                        sXml = xmlhttpDroplst.responseText;
                                                        
                                                        if(sXml=="")  //没有
                                                        {
                                                            xmlDroplst.loadXML("<Root></Root>");
                                                        }
                                                        else
                                                        {
                                                            xmlDroplst.loadXML(sXml);
                                                            
                                                        }
                                                        //缓存这次结果
                                                        arrDroplstID[iDroplstSavedCont] = idFields;
                                                        arrDroplstValue[iDroplstSavedCont] = sXml;
                                                        iDroplstSavedCont++;
                                                        if(object != null)
                                                        {
                                                            var nodes = xmlDroplst.documentElement.childNodes;
                                                            if(objSelect != null)
                                                            {
                                                               objSelect.options.length = 0;  //清除内容
                                                               for (i=0;i<nodes.length;i++)
                                                               {
                                                                    soptText = nodes(i).getAttribute("Text");
                                                                    blnAdd = false;
                                                                    if(sCurr == '')
                                                                    {
                                                                       blnAdd = true;
                                                                    }
                                                                    else
                                                                    {
                                                                       if(soptText.toUpperCase().indexOf(sCurr.toUpperCase()) == 0)
                                                                         {
                                                                            blnAdd=true;
                                                                         }
                                                                    }
                                                                    if(blnAdd == true)
                                                                    {
                                                                        objSelect.add(document.createElement("OPTION"));
                                                                        objSelect.options[j].text= soptText;
                                                                        objSelect.options[j].value=j; 
                                                                        j++;
                                                                    }
                                                                }

                                                            }
                                                            if(j >0)
                                                              {
                                                                 //存在时显示
                                                                 object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";       
                                                                 object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px"; 
                                                                 object.style.width = obj.offsetWidth + 2 + 'px';
                                                                 hideMe(id,'');
                                                              }
                                                        }
                                                     }
                                                }   
                      xmlhttpDroplst.send(null);   
                 }
                 catch(e3)
                 {
                 }
           }
       }
    }
    //通过缓存数组获取可以选择的值
    function getXmlHttpFields(idFields)
    {
        var respText = "-1";
        var i = 0;
        for(i=0;i<iDroplstSavedCont;i++)
        {
            if(idFields == arrDroplstID[i])
            {
               respText = arrDroplstValue[i];
            }
        }
        return respText;
  }

 

 

    整个控件脚本只是一部分，还有相应的aspx 后台代码 ascx代码等，这个就不一一介绍了，E8的客户可以联系我们对这个控件进行升级，或者在提供的全部源码基础上自己完善也可以，呵呵。

 

    希望对大家有所帮助