javascript实现自动切换焦点功能学习

最新推荐文章于 2022-08-18 15:44:59 发布

weixin_30721077

最新推荐文章于 2022-08-18 15:44:59 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/guihailiuli/p/4375563.html

版权

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

　　为了增强易用性，加快数据输入的速度，可以在前一个文本框中的字符达到一定的设置的字符长度后（比如电话号码，身份证号等），用户输入完后，自动将焦点切换到下一个文本框中。可以使用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高级程序设计。

转载于:https://www.cnblogs.com/guihailiuli/p/4375563.html

weixin_30721077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现自动切换焦点功能学习

　　当用户在表单中填写完当前字段后，能否自动将焦点跳转到下一个字段以方便用户输入？　　为了增强易用性，加快数据输入的速度，可以在前一个文本框中的字符达到一定的设置的字符长度后（比如电话号码，身份证号等），用户输入完后，自动将焦点切换到下一个文本框中。可以使用JS来实现这一功能。　　思路：首先，比较用户输入的值和文本框中的maxlength特性，确定是否达到了指定的长度(或者允许输...
复制链接

扫一扫