首页 > 技术文章 > jquery 方向键控制光标在不规则分布的input 中移动

yexiang 2013-07-12 15:59 原文

用方向键控制光标在表格中移动输入还是比较方便的,网上也有很多例子,比如用tabindex的:

 var baseIndex = 100;
        $("#tab1")
          .find("tr").each(function(r) {
      
              $(this).find("td").each(function(c) {
             
                  $(this).find("input")
                  .attr("tabindex", r * 100 + c + baseIndex)
                  .addClass("cGridInput");
              });
          });
        ///////////////////////////////////////////////////////////////////////
        $("#tab1 .cGridInput").live("keydown", function(evt) {
            var tabIndex = parseInt($(this).attr("tabindex"));
            switch (evt.which) {
                case 38: //
                    tabIndex -= 100;
                    break;
                case 40: //
                    tabIndex += 100;
                    break;
                case 37: //
                    tabIndex = tabIndex - 1;
                    break;
                case 39: //
                       
                    tabIndex = tabIndex + 1;
                    break;
                default:
                    return;
            }
            if (tabIndex > 0) {
                $(".cGridInput[tabindex=" + tabIndex + "]").focus();
                return false;
            }
            return true;
        });

但是上面的方法有个问题,就是input的分布必须是连续性的,中间不能间隔。也就是一个挨一个,像下面这种情况就不行了

为了能在这种不规则分布的输入框中自由移动光标,就重新改写了一下代码。

 
                     var tabArray = new Array(); //这是个二维数组
                     var maxr = 0
                     var maxc = 0;

                     $("#tab1").find("tr").each(function(r) {

                         $(this).find("td").each(function(c) {

                             //alert(r + "-" + c);
                             //r 是行号,c是列号
                             //这个td中存在input
                             if ($(this).find("input").length != 0) {
                                 var itemArray = new Array();
                                 itemArray[0] = r;
                                 itemArray[1] = c;
                                 tabArray.push(itemArray);
                             }

                             $(this).find("input").attr("class", "YX-" + r + "-" + c);

                             //获得最大列数
                             if (c > maxc) { maxc = c; }

                         });
                         //获得最大行数
                         if (r > maxr) { maxr = r; }
                     });

                     //////////////////////////////////////////////////////////////////////

                     $("#tab1 input").live("keydown", function(evt) {

                         var _css = $(this).attr("class");
                         var nCss = "";

                         var direction; //记录按键方向
                         switch (evt.which) {
                             case 38: //
                                 direction = "up";
                                 break;
                             case 40: //
                                 direction = "down";
                                 break;
                             case 37: //
                                 direction = "left";
                                 break;
                             case 39: //
                                 direction = "right";
                                 break;
                             default:
                                 return;
                         }

                         nCss = ReturnNextCss(_css, direction);

                         if (nCss != "") {
                             $(".YX-" + nCss).focus();
                             return false;
                         }
                         return true;
                     });


                     //判断二维数组中是否存在某个项目
                     function inArray(r, c) {
                         //遍历数组看存不存在
                         var flag = 0;
                         $.each(tabArray, function(i, n) {
                             if (r == n[0] && c == n[1]) { flag = 1; }
                         });

                         if (flag == 1)
                             return true;
                         else
                             return false;
                     }

                     //根据传入的css和方向来遍历数组以确定下一个输入框的按钮
                     function ReturnNextCss(nowCss, direction) {
                         var rCss = "";
                         var r = parseInt(nowCss.split('-')[1]);
                         var c = parseInt(nowCss.split('-')[2]);

                         //如果是向上按
                         if (direction == "up") {
                             r = r - 1;
                             while (r >= 0) {
                                 if (inArray(r, c)) { rCss = r + "-" + c; break; }
                                 r = r - 1;
                             }
                         }

                         ///////////////////////////////////////////
                         //如果是向下按
                         if (direction == "down") {
                             r = r + 1;
                             while (r <= maxr) {
                                 if (inArray(r, c)) { rCss = r + "-" + c; break; }
                                 r = r + 1;
                             }
                         }
                         ///////////////////////////////////////////
                         //如果是向左按
                         if (direction == "left") {
                             c = c - 1;
                             while (c >= 0) {
                                 if (inArray(r, c)) { rCss = r + "-" + c; break; }
                                 c = c - 1;
                             }
                         }

                         /////////////////////////////////////////////////
                         //如果是向右按
                         if (direction == "right") {
                             c = c + 1;
                             while (c <= maxc) {
                                 if (inArray(r, c)) { rCss = r + "-" + c; break; }
                                 c = c + 1;
                             }
                         }

                         return rCss;
                     }
 <table id="tab1" border="1" cellpadding="5" cellspacing="0" width="300px"> 
        <tr> 
        <td><input   style=" width:50px" /></td> 
        <td>2</td> 
        <td>3</td> 
        <td><input  style=" width:50px" /></td> 
        <td>5</td> 
        </tr> 

        <tr> 
        <td>1</td> 
        <td><input style=" width:50px" /></td> 
        <td>3</td> 
        <td>s</td> 
         <td><input style=" width:50px" /></td> 
        </tr>
        
        <tr> 
        <td><input style=" width:50px" /></td> 
        <td>2</td> 
        <td><input style=" width:50px" /></td> 
        <td><input style=" width:50px" /></td> 
        <td>5</td> 
        </tr> 
        
         <tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td><input style=" width:50px" /></td> 
        <td>5</td> 
        </tr> 
        
        <tr> 
        <td><input style=" width:50px" /></td> 
        <td>2</td> 
        <td>3</td> 
        <td><input style=" width:50px" /></td> 
        <td>5</td> 
        </tr> 
         
</table> 

 

推荐阅读