javascript自动切换焦点控制效果完整实例
本文实例讲述了javascript自动切换焦点控制的方法。分享给大家供大家参考，具体如下：
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<html>
<head>
<scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varEventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}elseif(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandle:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}elseif(element.detachEvent){
element.detachEvent("on"+type,handler);
}
},
getEvent:function(event){
returnevent?event:window.event;
},
getTarget:function(event){
returnevent.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
vardom_text1=document.getElementById("text1");
vardom_text2=document.getElementById("text2");
vardom_text3=document.getElementById("text3");
functionswitchFocus(event){
event=EventUtil.getEvent(event);
vartarget=EventUtil.getTarget(event);
if(target.value.length==target.maxLength){
varform=target.form;
for(vari=0;i<form.elements.length;i++){
if(form.elements[i]==target){
form.elements[i+1].focus();
return;
}
}
}
}
EventUtil.addHandler(dom_text1,"keyup",switchFocus);
EventUtil.addHandler(dom_text2,"keyup",switchFocus);
EventUtil.addHandler(dom_text3,"keyup",switchFocus);
})
</script>
</head>
<body>
<formid="form1">
<inputtype="text"maxlength="3"id="text1"/>
<inputtype="text"maxlength="3"id="text2"/>
<inputtype="text"maxlength="3"id="text3"/>
</br>
<inputtype="text"/>
</form>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《javascript面向对象入门教程》及《JavaScript数据结构与算法技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。