使用箭头键进行导航

问题描述

我想知道是否有可能使用箭头键导航我使用JS创建的表（使用jQuery）？我的意思是从一个单元格跳到另一个单元格......该脚本适用于Greasemonkey。

I am wondering if there was a possibility to navigate with arrow keys through a table I created with JS(using jQuery)? I mean jumping from cell to cell...The script is for Greasemonkey.

然而，警报可以正常工作。我根本不知道如何让它运作良好。

The alert, however, works. I just got no idea how to make it well-functioning.

$(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

Any hint or whatever is much appreciated.Thanks in advance,Faili

更新

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

It seems like I explained myself wrong. Give me another try:Demo

这个可能会让你知道我想要什么。选择一个输入字段后，可以使用箭头键导航。
我的问题是我无法通过GM和jQuery实现它。有什么想法？

This one may give you an idea of what I wanted. After selecting one input-field a navigation with arrow keys is possible.My problem is that I just can't realise it via GM and jQuery. Any idea?

再次感谢您的时间和精力。

Thanks again for your time and effort.

最后它就像：

Finally it was like:

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;
开关（e.keyCode）
{
案例37：
//键左。
selectArrowKey = leftkey;
休息;
案例38：
//关键字。
selectArrowKey = up;
休息;
案例39：
//关键权利。
selectArrowKey = right;
休息;
案例40：
//关键。
selectArrowKey = down;
休息;
}
如果（！selectArrowKey）返回;

var controls = window.document.getElementById（selectArrowKey）;
如果（！controls）返回;
controls.focus（）;
}
}
$（'＃field_analysis1'）。keydown（myTest_analysis1）;


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);

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

That's how it worked out for me. I bet there is a smarter solution, but I couldn't figure it out right now.

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

Thank you sooo much for your time and effort.

推荐答案

你应该能够聚焦各种细胞，我将使用.focus（）

You should be able to focus the various cells, I will put an example together using .focus()

以下是示例。

请记住......

a）此示例中没有任何内容可以阻止您超出范围，您需要将currentRow和currentCell的值限制为单元格数量，并防止它们低于0。

a) There is nothing in this example to stop you from going out of bounds, you would need to restrict the values of currentRow and currentCell to the number of cells and prevent them from going below 0.

b）目前，没有代码可以删除绿色文本，这是我用来显示当前焦点的内容。这意味着留下了一条绿色小道。

b) At the moment, there is no code to remove the green text, which is what I've used to show the current focus. This means a green trail is left behind.

你可以很容易地解决上述两个问题，但它们会让这个例子变得更加复杂......

You could solve both of the above fairly easily, but they would make the example more complicated...

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

这篇关于使用箭头键进行导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！