你的位置:首页 > Java教程

[Java教程]javascript实现自动切换焦点功能学习


  当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入?

  为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用户输入完后,自动将焦点切换到下一个文本框中。可以使用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  10     addhandler:function(element,type,handler){ 11       if(element.addEventListenter){ 12         element.addEventListenter(type,handler,false); 13       }else if(element.attachEvent){ 14         element.attachEvent("on"+type,handler); 15       }else{ 16         element["on"+type] = handler; 17       } 18     },    19     /* 20     该方法返回Event对象的引用,考虑到IE中对事件的位置的不同,可以使用这个方法取得Event对象。 21     */ 22     getEvent: function(event){ 23       return event ? event: window.event; 24     },  25     //返回事件的目标 26     getTarget: function(){ 27       return event.target || event.srcElement; 28     }, 29     /*通过比较用户输入的值与文本框的maxlength特性,确定是否达到最大长度 30     当两个值相等时,则需要查找表单字段的集合,查找到下一个文本框后将焦点切换 31     */ 32     preventDefault: function(){ 33       if(event.preventDefault){ 34         event.preventDefault(); 35       }else{ 36         event.returnValue = false; 37       } 38     }, 39     stopPropagation: function(){ 40       if(event.stopPropagation){ 41         event.stopPropagation(); 42       }else{ 43         event.cancelBuddle = true; 44       } 45     }, 46     removehandler: function(element,type,handler){ 47       if(element.removeEventListenter){ 48         element.addEventListenter(type,handler,false); 49       }else if(element.detachEvent){ 50         element.detachEvent("on"+type,handler); 51       }else{ 52         element["on" +type] = null; 53       } 54     }, 55     getCharCode:function(event){ 56       if(typeof event.charCode == "number"){ 57         return event.charCode; 58       }else{ 59         return event.keyCode; 60       } 61     }, 62     //处理字符编码 63   } 64  65   var textarea = document.forms[0].elements["text"]; 66   var button = document.getElementById("button"); 67  68   (function(){ 69     function tabForward(event){   //event事件对象传到事件处理程序中去 70       event = EventUtil.getEvent(event);  //把event传给getEvent()方法 71       var target = EventUtil.getTarget(event); 72  73       if(target.value.length == target.maxLength) {  //达到最大长度 74         var form = target.parentElement; 75  76         for(var i=0, len=form.elements.length; i<len-1; i++) 77         { 78           if(form.elements[i] == target){ 79             form.elements[i+1].focus(); //切换焦点 80             return; 81           } 82         } 83       } 84     } 85     var textName = document.getElementById("textName"); 86     var textTel = document.getElementById("textTel"); 87     var textID = document.getElementById("textID"); 88  89     EventUtil.addhandler(textName,"keyup",tabForward);  //在用户输入新字符后触发keyup事件 90     EventUtil.addhandler(textTel,"keyup",tabForward); 91     EventUtil.addhandler(textID,"keyup",tabForward); 92   })(); 93 } 94 </script> 95 </head> 96  97 <body> 98   <form> 99     <input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>100     <input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>101     <input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/>102 103   </form>104 </body>105 </html>

 

 对于这段代码中32到55行的作用,不懂,请看懂的人解释一下,thanks!

参考自:javascript高级程序设计。