web-dev-qa-db-ja.com

矢印キーを使用してナビゲートする

JS（jQueryを使用）で作成したテーブルを矢印キーでナビゲートする可能性はあったのでしょうか？セルからセルにジャンプすることを意味します...スクリプトはGreasemonkey用です。

ただし、アラートは機能します。私はそれをうまく機能させる方法がわかりませんでした。

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       alert( "left pressed " );
       return false;
    }
    if (e.keyCode == 38) { 
       alert( "up pressed " );
       return false;
    }
    if (e.keyCode == 39) { 
       alert( "right pressed " );
       return false;
    }
    if (e.keyCode == 40) { 
       alert( "down pressed " );
       return false;
    }
});
;

ヒントなど、大歓迎です。よろしくお願いします、Faili

更新

私は自分自身を間違って説明したようです。もう一度試してください： デモ

これは私が何を望んでいたかについてあなたに考えを与えるかもしれません。 1つの入力フィールドを選択すると、矢印キーを使用したナビゲーションが可能になります。私の問題は、GMとjQueryを介してそれを実現できないことです。何か考えはありますか？

お手数をおかけしますが、よろしくお願いいたします。

最後にそれは次のようでした：


function myTest_analysis1(e,leftkey,up,right,down){
    myTest(e,'','','field_analysis2','field_communication1')


function myTest(e,leftkey,up,right,down)
{
  if (!e) e=window.event;
  var selectArrowKey;
  switch(e.keyCode)
  {
  case 37:
    // Key left.
    selectArrowKey = leftkey;
    break;
  case 38:
    // Key up.
    selectArrowKey = up;
    break;
  case 39:
    // Key right.
    selectArrowKey = right;
    break;
  case 40:
    // Key down.
    selectArrowKey = down;
    break;
  }
  if (!selectArrowKey) return;

  var controls = window.document.getElementById(selectArrowKey);
  if (!controls) return;
  controls.focus();
}
}
 $('#field_analysis1').keydown (myTest_analysis1);

お手数をおかけしますが、よろしくお願いいたします。

javascriptjquerygreasemonkey
16
Faili

さまざまなセルに焦点を合わせることができるはずです。focus（）を使用して例をまとめます。

これが例です。

覚えておいてください...

a）この例には、範囲外になるのを防ぐものは何もありません。currentRowとcurrentCellの値をセルの数に制限し、それらが0を下回らないようにする必要があります。

b）現時点では、緑色のテキストを削除するコードはありません。これは、現在のフォーカスを表示するために使用したものです。これは、緑の道が残されていることを意味します。

上記の両方をかなり簡単に解決できますが、例がより複雑になります...

    var currentRow = 0;
    var currentCell = 0;

    function ChangeCurrentCell() {
        var tableRow = document.getElementsByTagName("tr")[currentRow];
        var tableCell = tableRow.childNodes[currentCell];
        tableCell.focus();
        tableCell.style.color = "Green";
    }
    ChangeCurrentCell();

    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
           currentCell--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 38) { 
           currentRow--;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 39) { 
           currentCell++;
           ChangeCurrentCell();
           return false;
        }
        if (e.keyCode == 40) { 
           currentRow++;
           ChangeCurrentCell();
           return false;
        }
    });
11
Fenton

これが以下を可能にするバージョンです

  1. テーブルの開始と終了（テーブルの最初と最後のセル）で制約
  2. 各行の終わりで折り返し、次の行に移動します
  3. 表示するためにスクロールが必要な場合は、現在のセルをスクロールして表示します
  4. セルを選択するためのマウスクリックをサポート

デモat： http://jsfiddle.net/BdVB9/

のようなhtml構造で

<table id="navigate">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

およびjavascript

var active = 0;

$(document).keydown(function(e){
    reCalculate(e);
    rePosition();
    return false;
});

$('td').click(function(){
   active = $(this).closest('table').find('td').index(this);
   rePosition();
});


function reCalculate(e){
    var rows = $('#navigate tr').length;
    var columns = $('#navigate tr:eq(0) td').length;
    //alert(columns + 'x' + rows);

    if (e.keyCode == 37) { //move left or wrap
        active = (active>0)?active-1:active;
    }
    if (e.keyCode == 38) { // move up
        active = (active-columns>=0)?active-columns:active;
    }
    if (e.keyCode == 39) { // move right or wrap
       active = (active<(columns*rows)-1)?active+1:active;
    }
    if (e.keyCode == 40) { // move down
        active = (active+columns<=(rows*columns)-1)?active+columns:active;
    }
}

function rePosition(){
    $('.active').removeClass('active');
    $('#navigate tr td').eq(active).addClass('active');
    scrollInView();
}

function scrollInView(){
    var target = $('#navigate tr td:eq('+active+')');
    if (target.length)
    {
        var top = target.offset().top;

        $('html,body').stop().animate({scrollTop: top-100}, 400);
        return false;
    }
}
21
Gabriele Petrioli

これが私のバージョンです...

デモ

var active;
$(document).keydown(function(e){
    active = $('td.active').removeClass('active');
    var x = active.index();
    var y = active.closest('tr').index();
    if (e.keyCode == 37) { 
       x--;
    }
    if (e.keyCode == 38) {
        y--;
    }
    if (e.keyCode == 39) { 
        x++
    }
    if (e.keyCode == 40) {
        y++
    }
    active = $('tr').eq(y).find('td').eq(x).addClass('active');
});​
10
Reigel