输入法下keyup失效的解决方案

在某些情况下,比如自动补全(auto complete)的输入框中,需要使用keyup事件来监听键盘的输入以迅速作出回应。

关键在于keyup, 如果世界是美好的,那么就不会有这篇blog. 可是……

世界是不美好的。我们活在中文世界,我们要用输入法。在输入法开启的情况下,您会碰到不美好的事情:keyup失效。对于您绑定到keyup的任何回调函数,除非您把输入法切换回英文状态,否则它会无动于衷。如果能称之为bug,我会很高兴,因为bug会有修复的可能,如果是特征(feature),那么,我只好叹息一下。

问题
在开启输入法的情况下,三个浏览器的具体问题如下:

IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
Opera:keydown, keypress和keyup都不触发,输入值也未能获。
(如果您能帮我试用一下Safari,我会很高兴并谢谢您。这里有一个测试页面:http://tonextone.com/test/eventTest.html)

解决方案
总结出以上问题,没有兴奋反而陷入绝望,因为没有google出解决方案(是的,对于拉丁语系的老外来说,不会存在输入法)。但是,wait, 谷歌搜索的自动补全不是工作得好好的吗?于是研究一下这个 http://www.google.cn/ac.js。嘿嘿,虽然混淆得还可以,但还是可以发现蛛丝马脚的。它使用一个计时器,当输入框处于聚焦(focus)状态时,每 10 毫秒执行一次回调函数。

虽然挺耗资源(所以建议在输入框失焦(blur)时,一定要清除这个计时器),但也只能如此了。作前端开发的,不仅要与语言(JavaScript, CSS, HTML) 斗,还要与浏览器斗,其乐无穷也。

更新:IE 有一个 onpropertychange 事件处理器可以随时检测变化,对应之,Firefox 和 Opera 有一个 oninput 事件处理器也可以达到目的。遗憾的是,在输入法开启的情况下,Opera对于 oninput 也没法随时监听(表现在:输入英文字母可以监听到,而中文则失效)。如果不考虑 Opera, IE使用 onpropertychange 而 Firefox 使用 oninput, 也可解决我们上述问题。

另外需要注意的是, oninput 比较诡异,您可以<input oninput="jsFunc()" ... />来绑定,也可以用addEventListener来绑定,就是不能使用 DOM 0 的element.oninput = function(){} 的形式来绑定,否则不生效。

未曾测试Safari, 有心者可自行测试之。

This entry was posted on Wednesday, October 31st, 2007 at 00:55 and is filed under JS / Dom. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • var x="",$a=false,qa="",da=false,k="",M="",j="",r=-1,n=null,A=-1,U=null,pa=5,w="",mb="div",Ya="span",H=null,d=null,i=null,m=null,Ta=null,Va=null,J=null,u=null,ua=false,Ca={},T=1,ia=1,ha=false,aa=false,va=-1,Qa=(new Date).getTime(),F=false,q=null,ra=null,E=null,K=null,Z=null,$=false,Da=false,v=60,Pa=null,na=null,D=0,I=0,La=null,X=null,Y=null,ka=false,W=false,ja="",C=null,S=null,p=null,t=null,oa=null,Ma=-1,Na=-1,G="left",V="right",R=0,ya=false;InstallAC=function(a,b,c,e,f,h,g,l){H=a;d=b;Ta=c;if(!e)e=  
  • "search";Pa=e;var o="zh|zh-CN|zh-TW|ja|ko|",y="iw|ar|fa|ur|";if(!f||f.length<1)f="en";u=Ea(f);if(y.indexOf(u+"|")!=-1){G="right";V="left"}if(u=="zh-TW"||u=="zh-CN"||u=="ja"){ya=true}if(o.indexOf(u+"|")==-1){J=false;aa=true;ha=false;$=false}else{J=false;aa=true;if(u.indexOf("zh")==0)ha=false;$=true}if(!h)h=false;na=h;if(!g)g="query";x=g;Va=l;db()};function Fa(){ua=true;d.blur();setTimeout("sfi();",10)}function nb(){if(document.createEventObject){var a=document.createEventObject();a.ctrlKey=true;a.keyCode=  
  • 70;document.fireEvent("onkeydown",a)}}function jb(a){if(!a&&window.event)a=window.event;if(a)va=a.keyCode;if(a&&a.keyCode==8){if(J&&d.createTextRange&&a.srcElement==d&&O(d)==0&&P(d)==0){Wa(d);a.cancelBubble=true;a.returnValue=false;return false}}}function lb(){if(x=="url"){Ra()}ca()}function ca(){if(i){i.style.left=Ia(d,"offsetLeft")+"px";i.style.top=Ia(d,"offsetTop")+d.offsetHeight-1+"px";i.style.width=Ha()+"px";if(m){m.style.left=i.style.left;m.style.top=i.style.top;m.style.width=i.style.width;  
  • m.style.height=i.style.height}}}function Ha(){if(navigator&&navigator.userAgent.toLowerCase().indexOf("msie")==-1){return d.offsetWidth-T*2}else{return d.offsetWidth}}function db(){if(Ja()){F=true}else{F=false}if($a)E="complete";else E="/complete/"+Pa;ra=E+"?hl="+u+"&client=suggest";if(!F){ta("qu","",0,E,null,null)}H.onsubmit=la;d.autocomplete="off";d.onblur=fb;d.onfocus=kb;if(d.createTextRange){d.onkeydown=new Function("return okdh(event); ");d.onkeyup=new Function("return okuh(event); ")}else{d.onkeypress=  
  • okdh;d.onkeyup=okuh}d.onsubmit=la;k=d.value;qa=k;i=document.createElement("DIV");i.id="completeDiv";T=1;ia=1;i.style.borderRight="black "+T+"px solid";i.style.borderLeft="black "+T+"px solid";i.style.borderTop="black "+ia+"px solid";i.style.borderBottom="black "+ia+"px solid";i.style.zIndex="2";i.style.paddingRight="0";i.style.paddingLeft="0";i.style.paddingTop="0";i.style.paddingBottom="0";i.style.visibility="hidden";i.style.position="absolute";i.style.backgroundColor="white";m=document.createElement("IFRAME");  
  • m.id="completeIFrame";m.style.zIndex="1";m.style.position="absolute";if(window.opera&&(!window.opera.version||window.opera.version()<="8.54"))m.style.display="none";else m.style.display="block";m.style.visibility="hidden";m.style.borderRightWidth="0";m.style.borderLeftWidth="0";m.style.borderTopWidth="0";m.style.borderBottomWidth="0";ca();document.body.appendChild(i);document.body.appendChild(m);Aa("",[],[]);cb(i);var a=document.createElement("DIV");a.style.visibility="hidden";a.style.position="absolute";  
  • a.style.left="0";a.style.top="-10000";a.style.width="0";a.style.height="0";var b=document.createElement("IFRAME");b.completeDiv=i;b.name="completionFrame";b.id="completionFrame";if(!F){b.src=ra}a.appendChild(b);document.body.appendChild(a);if(frames&&frames["completionFrame"]&&frames["completionFrame"].frameElement)K=frames["completionFrame"].frameElement;else K=document.getElementById("completionFrame");if(x=="url"){Ra();ca()}window.onresize=lb;document.onkeydown=jb;nb();if($){setTimeout("idkc()",  
  • 10);if(d.attachEvent){d.attachEvent("onpropertychange",ab)}}p=document.createElement("INPUT");p.type="hidden";p.name="aq";p.value=null;p.disabled=true;H.appendChild(p);t=document.createElement("INPUT");t.type="hidden";t.name="oq";t.value=null;t.disabled=true;H.appendChild(t)}function kb(a){W=true}function fb(a){W=false;if(!a&&window.event)a=window.event;if(!ua){B();if(va==9){pb();va=-1}}ua=false}function ga(a){if(a==38||a==63232){return true}return false}function fa(a){if(a==40||a==63233){return true}return false}  
  • okdh=function(a){if(!(ga(a.keyCode)||fa(a.keyCode))){return true}R++;if(R%3==1)za(a);return false};okuh=function(a){if(!(ya&&(ga(a.keyCode)||fa(a.keyCode)))&&R==0){za(a)}R=0;return false};function za(a){if(!ka){ka=true}j=a.keyCode;Z=d.value;Oa()}function pb(){Ta.focus()}sfi=function(){d.focus()};function rb(a){for(var b=0,c="",e="\n\r";b<a.length;b++)if(e.indexOf(a.charAt(b))==-1)c+=a.charAt(b);else c+=" ";return c}function Ga(a,b){var c=a.getElementsByTagName(Ya);if(c){for(var e=0;e<c.length;++e){if(c[e].className==  
  • b){var f=c[e].innerHTML;if(f=="&nbsp;")return"";else{var h=rb(f);return h}}}}else{return""}}function L(a){if(!a)return null;return Ga(a,"cAutoComplete")}function ma(a){if(!a)return null;return Ga(a,"dAutoComplete")}function B(){document.getElementById("completeDiv").style.visibility="hidden";document.getElementById("completeIFrame").style.visibility="hidden"}function Sa(){document.getElementById("completeDiv").style.visibility="visible";document.getElementById("completeIFrame").style.visibility="visible";  
  • ca()}function Aa(a,b,c){Ca[a]=new Array(b,c)}Suggest_apply=function(a,b,c,e){if(c.length==0||c[0]<2)return;var f=[],h=[],g=c[0],l=Math.floor((c.length-1)/g);for(var o=0;o<l;o++){f.push(c[o*g+1]);h.push(c[o*g+2])}var y=e?e:[];sendRPCDone(a,b,f,h,y)};sendRPCDone=function(a,b,c,e,f){if(D>0)D--;var h=(new Date).getTime();if(!a)a=K;Aa(b,c,e);if(b==k){if(C){clearTimeout(C);C=null}ja=b}var g=a.completeDiv;g.completeStrings=c;g.displayStrings=e;g.prefixStrings=f;Za(g,g.completeStrings,g.displayStrings);Ka(g,  
  • L);if(pa>0){g.height=16*pa+4;m.height=g.height-4}else{B()}};hcd=function(){B();C=null};function Oa(){if(j==40||j==38)Fa();var a=P(d),b=O(d),c=d.value;if(J&&j!=0){if(a>0&&b!=-1)c=c.substring(0,b);if(j==13||j==3){var e=d;if(e.createTextRange){var f=e.createTextRange();f.moveStart("character",e.value.length);f.select()}else if(e.setSelectionRange){e.setSelectionRange(e.value.length,e.value.length)}}else{if(d.value!=c)N(c)}}if(j!=9&&j!=13&&!(j>=16&&j<=20)&&j!=27&&!(j>=33&&j<=38)&&j!=40&&j!=44&&!(j>=112&&  
  • j<=123)){k=c;if(j!=39)oa=c}if(Xa(j)&&j!=0&&ja==k)Ka(i,L);if(ja!=k&&!C)C=setTimeout("hcd()",500)}function la(){return eb(x)}function eb(a){da=true;if(!F){ta("qu","",0,E,null,null)}B();if(a=="url"){var b="";if(r!=-1&&n)b=L(n);if(b=="")b=d.value;if(w=="")document.title=b;else document.title=w;var c="window.frames['"+Va+"'].location = \""+b+'";';setTimeout(c,10);return false}else if(a=="query"){p.disabled=(t.disabled=true);if(oa!=d.value){p.value="t";p.disabled=false;t.value=oa;t.disabled=false}else if(S){p.value= 
  • S;p.disabled=false}else if(I>=3||D>=10){p.value="o";p.disabled=false}S=null;return true}}newwin=function(){window.open(d.value);B();return false};idkc=function(a){if($){if(W){Ua()}var b=d.value;if(b!=Z){j=0;Oa()}Z=b;setTimeout("idkc()",10)}};function Ea(a){if(encodeURIComponent)return encodeURIComponent(a);if(escape)return escape(a)}function bb(a){var b=100;for(var c=1;c<=(a-2)/2;c++){b=b*2}b=b+50;return b}idfn=function(){if(I>=3)return false;if(qa!=k){if(!da){var a=Ea(k),b=Ca[k];if(b){Qa=-1;sendRPCDone(K, 
  • k,b[0],b[1],K.completeDiv.prefixStrings)}else{D++;Qa=(new Date).getTime();if(F){ob(a)}else{ta("qu",a,null,E,null,null);frames["completionFrame"].document.location.reload(true)}}d.focus()}da=false}qa=k;setTimeout("idfn()",bb(D));return true};setTimeout("idfn()",10);var gb=function(){d.blur();N(L(this));w=ma(this);da=true;if(la())H.submit()},hb=function(){if(window.event){var a=window.event.x,b=window.event.y;if(a==Ma&&b==Na){return}Ma=a;Na=b}if(n)s(n,"aAutoComplete");s(this,"bAutoComplete");n=this; 
  • for(var c=0;c<A;c++){if(U[c]==n){r=c;break}}},ib=function(){s(this,"aAutoComplete")};function sa(a){S="t";k=M;N(M);w=M;if(!U||A<=0)return;Sa();if(n)s(n,"aAutoComplete");if(a==A||a==-1){r=-1;d.focus();return}else if(a>A){a=0}else if(a<-1){a=A-1}r=a;n=U.item(a);s(n,"bAutoComplete");k=M;w=ma(n);N(L(n))}function Xa(a){if(fa(a)){sa(r+1);return false}else if(ga(a)){sa(r-1);return false}else if(a==13||a==3){return false}return true}function Ka(a,b){var c=d,e=false;r=-1;var f=a.getElementsByTagName(mb),h= 
  • f.length;A=h;U=f;pa=h;M=k;if(k==""||h==0){B()}else{Sa()}var g="";if(k.length>0){var l,o;for(var l=0;l<h;l++){for(o=0;o<a.prefixStrings.length;o++){var y=a.prefixStrings[o]+k;if(ha||!aa&&b(f.item(l)).toUpperCase().indexOf(y.toUpperCase())==0||aa&&l==0&&b(f.item(l)).toUpperCase()==y.toUpperCase()){g=a.prefixStrings[o];e=true;break}}if(e){break}}}if(e)r=l;for(var l=0;l<h;l++)s(f.item(l),"aAutoComplete");if(e){n=f.item(r);w=ma(n)}else{w=k;r=-1;n=null}var wa=false;switch(j){case 8:case 33:case 34:case 35:case 35:case 36:case 37:case 39:case 45:case 46:wa= 
  • true;break;default:break}if(!wa&&n){var ea=k;s(n,"bAutoComplete");var Q;if(e)Q=b(n).substr(a.prefixStrings[o].length);else Q=ea;if(Q!=c.value){if(c.value!=k)return;if(J){if(c.createTextRange||c.setSelectionRange)N(Q);if(c.createTextRange){var xa=c.createTextRange();xa.moveStart("character",ea.length);xa.select()}else if(c.setSelectionRange){c.setSelectionRange(ea.length,c.value.length)}}}}else{r=-1;w=k}}function Ia(a,b){var c=0;while(a){c+=a[b];a=a.offsetParent}return c}function ta(a,b,c,e,f,h){var g= 
  • a+"="+b+(c?"; expires="+c.toGMTString():"")+(e?"; path="+e:"")+(f?"; domain="+f:"")+(h?"; secure":"");document.cookie=g}function Ra(){var a=document.body.scrollWidth-220;a=0.73*a;d.size=Math.floor(a/6.18)}function P(a){var b=-1;if(a.createTextRange){var c=document.selection.createRange().duplicate();b=c.text.length}else if(a.setSelectionRange){b=a.selectionEnd-a.selectionStart}return b}function O(a){var b=0;if(a.createTextRange){var c=document.selection.createRange().duplicate();c.moveEnd("textedit", 
  • 1);b=a.value.length-c.text.length}else if(a.setSelectionRange){b=a.selectionStart}else{b=-1}return b}function Wa(a){if(a.createTextRange){var b=a.createTextRange();b.moveStart("character",a.value.length);b.select()}else if(a.setSelectionRange){a.setSelectionRange(a.value.length,a.value.length)}}function s(a,b){Ba();a.className=b;if(Da){return}switch(b.charAt(0)){case "m":a.style.fontSize="13px";a.style.fontFamily="arial,sans-serif";a.style.wordWrap="break-word";break;case "l":a.style.display="block"; 
  • a.style.paddingLeft="3";a.style.paddingRight="3";a.style.height="16px";a.style.overflow="hidden";break;case "a":a.style.backgroundColor="white";a.style.color="black";if(a.displaySpan){a.displaySpan.style.color="green"}break;case "b":a.style.backgroundColor="#3366cc";a.style.color="white";if(a.displaySpan){a.displaySpan.style.color="white"}break;case "c":a.style.width=v+"%";a.style.cssFloat=G;a.style.whiteSpace="nowrap";a.style.overflow="hidden";a.style.textOverflow="ellipsis";break;case "d":a.style.cssFloat= 
  • V;a.style.width=100-v+"%";if(x=="query"){a.style.fontSize="10px";a.style.textAlign=V;a.style.color="green";a.style.paddingTop="3px"}else{a.style.color="#696969"}break}}function Ba(){v=65;if(x=="query"){var a=110,b=Ha(),c=(b-a)/b*100;v=c}else{v=65}if(na){v=99.99}}function cb(a){Ba();var b="font-size: 13px; font-family: arial,sans-serif; word-wrap:break-word;",c="display: block; padding-left: 3; padding-right: 3; height: 16px; overflow: hidden;",e="background-color: white;",f="background-color: #3366cc; color: white ! important;", 
  • h="display: block; margin-"+G+": 0%; width: "+v+"%; float"+G+";",g="display: block; margin-"+G+""+v+"%;";if(x=="query"){g+="font-size: 10px; text-align: "+V+"; color: green; padding-top: 3px;"}else{g+="color: #696969;"}z(".mAutoComplete",b);z(".lAutoComplete",c);z(".aAutoComplete *",e);z(".bAutoComplete *",f);z(".cAutoComplete",h);z(".dAutoComplete",g);s(a,"mAutoComplete")}function Za(a,b,c){while(a.childNodes.length>0)a.removeChild(a.childNodes[0]);for(var e=0;e<b.length;++e){var f=document.createElement("DIV"); 
  • s(f,"aAutoComplete");f.onmousedown=gb;f.onmousemove=hb;f.onmouseout=ib;var h=document.createElement("SPAN");s(h,"lAutoComplete");if(u.substring(0,2)=="zh")h.style.height=d.offsetHeight-4;else h.style.height=d.offsetHeight-6;var g=document.createElement("SPAN");g.innerHTML=b[e];var l=document.createElement("SPAN");s(l,"dAutoComplete");s(g,"cAutoComplete");f.displaySpan=l;if(!na)l.innerHTML=c[e];h.appendChild(g);h.appendChild(l);f.appendChild(h);a.appendChild(f)}}function z(a,b){if(Da){var c=document.styleSheets[0]; 
  • if(c.addRule){c.addRule(a,b)}else if(c.insertRule){c.insertRule(a+" { "+b+" }",c.cssRules.length)}}}function Ja(){var a=null;try{a=new ActiveXObject("Msxml2.XMLHTTP")}catch(b){try{a=new ActiveXObject("Microsoft.XMLHTTP")}catch(c){a=null}}if(!a&&typeof XMLHttpRequest!="undefined"){a=new XMLHttpRequest}return a}function ob(a){if(q&&q.readyState!=0&&q.readyState!=4){q.abort()}q=Ja();if(q){q.open("GET",ra+"&js=true&qu="+a,true);q.onreadystatechange=function(){if(q.readyState==4&&q.responseText){switch(q.status){case 403:I= 
  • 1000;break;case 302:case 500:case 502:case 503:I++;break;case 200:var b=q.responseText;if(b.charAt(0)!="<"&&(b.indexOf("sendRPCDone")!=-1||b.indexOf("Suggest_apply")!=-1))eval(b);else D--;default:I=0;break}}};q.send(null)}}function N(a){d.value=a;Z=a}function ab(a){if(!a&&window.event)a=window.event;if(!ka&&W&&a.propertyName=="value"){if(sb()){Ua();setTimeout("ba("+X+""+Y+");",30)}}}function sb(){var a=d.value,b=O(d),c=P(d);return b==X&&c==Y&&a==La}function Ua(){La=d.value;X=O(d);Y=P(d)}ba=function(a,  
  • b){if(a==X&&b==Y){qb()}};function qb(){Fa();sa(r+1)};  
    1. da shang
      donate-alipay
                 donate-weixin weixinpay

    发表评论↓↓