当用户在表单中填写完当前字段后，能否自动将焦点跳转到下一个字段以方便用户输入？
为了增强易用性，加快数据输入的速度，可以在前一个文本框中的字符达到一定的设置的字符长度后（比如电话号码，身份证号等），用户输入完后，自动将焦点切换到下一个文本框中。可以使用JS来实现这一功能。
思路：首先，比较用户输入的值和文本框中的maxlength特性，确定是否达到了指定的长度(或者允许输入的最大长度)，如果这两个值相等，就去查找表单字段的集合，找到下一个文本框，将焦点切换到该文本框中。
代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>JS自动切换焦点</title>
6 <script type="text/javascript">
7 window.onload = function(){
8 var EventUtil = {
9 addhandler:function(element,type,handler){
10 if(element.addEventListenter){
11 element.addEventListenter(type,handler,false);
12 }else if(element.attachEvent){
13 element.attachEvent("on"+type,handler);
14 }else{
15 element["on"+type] = handler;
16 }
17 },
18 getEvent: function(event){
19 return event ? event: window.event;
20 },
21 getTarget: function(){
22 return event.target || event.srcElement;
23 },
24 preventDefault: function(){
25 if(event.preventDefault){
26 event.preventDefault();
27 }else{
28 event.returnValue = false;
29 }
30 },
31 stopPropagation: function(){
32 if(event.stopPropagation){
33 event.stopPropagation();
34 }else{
35 event.cancelBuddle = true;
36 }
37 },
38 removehandler: function(element,type,handler){
39 if(element.removeEventListenter){
40 element.addEventListenter(type,handler,false);
41 }else if(element.detachEvent){
42 element.detachEvent("on"+type,handler);
43 }else{
44 element["on" +type] = null;
45 }
46 },
47 getCharCode:function(event){
48 if(typeof event.charCode == "number"){
49 return event.charCode;
50 }else{
51 return event.keyCode;
52 }
53 },
54 }
55
56 var textarea = document.forms[0].elements["text"];
57 var button = document.getElementById("button");
58
59 (function(){
60 function tabForward(event){
61 event = EventUtil.getEvent(event);
62 var target = EventUtil.getTarget(event);
63
64 if(target.value.length == target.maxLength) {
65 var form = target.parentElement;
66
67 for(var i=0, len=form.elements.length; i<len-1; i++)
68 {
69 if(form.elements[i] == target){
70 form.elements[i+1].focus();
71 return;
72 }
73 }
74 }
75 }
76 var textName = document.getElementById("textName");
77 var textTel = document.getElementById("textTel");
78 var textID = document.getElementById("textID");
79
80 EventUtil.addhandler(textName,"keyup",tabForward);
81 EventUtil.addhandler(textTel,"keyup",tabForward);
82 EventUtil.addhandler(textID,"keyup",tabForward);
83 })();
84 }
85 </script>
86 </head>
87
88 <body>
89 <form>
90 <input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>
91 <input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>
92 <input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/>
93
94 </form>
95 </body>
96 </html>
时间： 2024-08-11 22:20:47