Javascript 使用箭头键导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3245398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using arrows-keys to navigate
提问by Faili
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.
我想知道是否有可能使用箭头键浏览我用 JS（使用 jQuery）创建的表格？我的意思是从一个单元跳到另一个单元......脚本是为 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;
}
});
;Any hint or whatever is much appreciated. Thanks in advance, Faili
任何提示或任何东西都非常感谢。提前致谢，法利
Update
更新
It seems like I explained myself wrong. Give me another try: Demo
好像我解释错了。再试一次： 演示
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?
这个可能会让你知道我想要什么。选择一个输入字段后，可以使用箭头键进行导航。我的问题是我无法通过 GM 和 jQuery 实现它。任何的想法？
Thanks again for your time and effort.
再次感谢您的时间和努力。
Finallyit 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;
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);
Thank you sooo much for your time and effort.
非常感谢您的时间和精力。
采纳答案by Fenton
You should be able to focus the various cells, I will put an example together using .focus()
您应该能够聚焦各种单元格，我将使用 .focus() 将示例放在一起
Here is the example.
这是示例。
Please bear in mind that...
请记住，...
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.
a) 在这个例子中没有什么可以阻止你越界，你需要将 currentRow 和 currentCell 的值限制为单元格的数量，并防止它们低于 0。
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.
b) 目前，没有去除绿色文本的代码，这是我用来显示当前焦点的代码。这意味着留下了一条绿色的痕迹。
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;
}
});
回答by Gabriele Petrioli
Here is a version that allows for the following
这是一个允许以下内容的版本
- constrains at start and end of the table (first and last cell of the table)
- wraps at the end of each row and moves to the next
- scrolls the current cell into view if there is scrolling required to see it
- supports mouse-click to select a cell
- 表格开头和结尾的约束（表格的第一个和最后一个单元格）
- 在每一行的末尾换行并移动到下一行
- 如果需要滚动才能看到当前单元格，则将当前单元格滚动到视图中
- 支持鼠标点击选择单元格
Demo at: http://jsfiddle.net/BdVB9/
演示：http: //jsfiddle.net/BdVB9/
with an html structure like
具有 html 结构，如
<table id="navigate">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
and javascript
和 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;
}
}
回答by Reigel
here is my version...
这是我的版本...
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');
});?
