使用箭头键进行导航

时间:2010-07-14 10:52:53

标签: javascript jquery greasemonkey

我想知道是否有可能使用箭头键导航我使用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

更新

好像我解释自己错了。再试一次: Demo

这个可以让你知道我想要什么。选择一个输入字段后,可以使用箭头键导航。 我的问题是我无法通过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);

这就是我的成功之道。我敢打赌,有一个更聪明的解决方案,但我现在无法理解。

非常感谢你的时间和精力。

3 个答案:

答案 0 :(得分:21)

这是一个允许以下

的版本
  1. 约束表格的开头和结尾(表格的第一个和最后一个单元格)
  2. 包裹在每一行的末尾并移至下一行
  3. 如果需要滚动才能将当前单元格滚动到视图中
  4. 支持鼠标单击以选择单元格
  5. 演示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;
        }
    }
    

答案 1 :(得分:11)

你应该能够聚焦各种细胞,我将使用.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;
        }
    });

答案 2 :(得分:10)

这是我的版本......

demo

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');
});​