javascript - 如何使用箭头键从一个文本框导航到另一个文本框

Question

我可以使用向上和向下箭头键。但是有人可以提供解决方案如何使用向左和向右键移动到相邻的文本框。我使用了 div 而不是 Table 标签。

提前致谢。这是我写的JS代码。

 $("input").keydown(function (e) {                               
   switch (e.which) {
     case 39:
       break;
     case 37:
       break;
     case 40:
       $(this).parent().parent().next().find('input').focus()
       break;
     case 38:
       $(this).parent().parent().prev().find('input').focus()
       break;
   }
 });

fiddle 示例:http://jsfiddle.net/cAyRs/747/

Answer 1

您可以通过在数组数组中创建上下文来轻松解决此问题:

var matrix = [];
for (var i = 0; i < rowCount; i++) {
    var row = [];
    var rowInputs;
    //Somehow get the context of the inputs you have in the given row
    //Let's suppose it is inside an inputs array:
    for (var j = 0; j< inputs.length; j++) {
        row.push(inputs[j]);
        inputs[j].data("row-index", i).data("col-index", j);
    }
    matrix.push(row);
}

然后，如果您将能够分别读取 .data("row-index") 和 .data("col-index")根据按下的按钮增加/减少相关索引，您将能够找到新索引。使用新索引，您只需在与新索引对应的 matrix 中的元素上 .focus() 即可。不过要注意越界问题。