javascript自動切換焦點控制效果完整實例_javascript技巧
- WBOY原創
- 2016-05-16 15:16:291401瀏覽
本文實例講述了javascript自動切換焦點控制的方法。分享給大家參考，具體如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var EventUtil = {
addHandler: function(element,type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(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);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}
},
getEvent:function(event){
return event ? event:window.event;
},
getTarget:function(event){
return event.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;
}
}
};
var dom_text1=document.getElementById("text1");
var dom_text2=document.getElementById("text2");
var dom_text3=document.getElementById("text3");
function switchFocus(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.value.length==target.maxLength){
var form=target.form;
for(var i=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>
<form id="form1">
<input type="text" maxlength="3" id="text1"/>
<input type="text" maxlength="3" id="text2"/>
<input type="text" maxlength="3" id="text3"/>
</br>
<input type="text" />
</form>
</body>
</html>
更多關於JavaScript相關內容有興趣的讀者可查看本站專題：《JavaScript動畫特效與技巧總結》、《javascript物件導向入門教學》及《JavaScript資料結構與演算法技巧總結》
希望本文所述對大家JavaScript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn