如何使用箭頭鍵從一個文本框導航到另一個文本框

Question

我可以使用向上和向下箭頭鍵，但是有人可以提供解決方案如何使用向左和向右鍵移動到相鄰的文本框.i使用了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;
   }
 });

小提琴示例： 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()即可。 但是要當心出界問題。