1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>自动切换焦点</title> 6 <script type="text/javascript" src="eventutil.js"></script> 7 </head> 8 <body> 9 <form action="#" method="post"> 10 <input type="text" name="tel1" id="txtTel1" maxlength="3" /> 11 <input type="text" name="tel2" id="txtTel2" maxlength="3" /> 12 <input type="text" name="tel3" id="txtTel3" maxlength="3" /> 13 </form> 14 <script type="text/javascript" src="test03.js"></script> 15 </body> 16 </html>
1 (function() { 2 function tabForward(event) { 3 event = EventUtil.getEvent(event); 4 var target = EventUtil.getTarget(event); 5 6 if (target.value.length == target.maxLength) { 7 var form = target.form; 8 for (var i = 0, len = form.elements.length; i < len; i++) { 9 if (form.elements[i] == target && i < 2) { 10 form.elements[i + 1].focus(); 11 return; 12 } 13 } 14 } 15 } 16 var textbox1 = document.getElementById("txtTel1"); 17 var textbox2 = document.getElementById("txtTel2"); 18 var textbox3 = document.getElementById("txtTel3"); 19 20 EventUtil.addHandler(textbox1, "keyup", tabForward); 21 EventUtil.addHandler(textbox2, "keyup", tabForward); 22 EventUtil.addHandler(textbox3, "keyup", tabForward); 23 })();