矢印キーを使用して1つのテキストボックスから別のテキストボックスにナビゲートする方法

Question

上下の矢印キーを使用して作業できますが、左と右のキーを使用してテキストボックスに移動する方法を教えてください。 divのテーブルタグではありません。

ありがとうございます。これは私が書いた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()が必要になります。しかし、境界外の問題に注意してください。