自动切换焦点 

 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 })();
posted @ 2012-06-04 15:34  小猩猩君  阅读(159)  评论(0)    收藏  举报