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 })();
