javascript实现自动切换焦点功能学习
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高级程序设计。