在网站上使用键盘的简单和正确的导航方式？

Question

添加选项以使用键盘输入浏览网页的最简单和跨浏览器的正确方法是什么？现在设计一个真正宽而长的页面，并希望向用户提供只使用键盘进行滚动的选项。

可能有部分包含div标签的div，理想情况下，我希望按下“left”“right”“up”或“down”键时从一个div转换到另一个div。

谢谢！

Answer 1

首先，在浏览器中有箭头键的默认行为。如果页面比页面更长或更宽，则它们在页面上滚动。

如果你的页面是可滚动的，你不应该真的重写箭头键，他们已经工作。

有些情况下，您可能想将事件绑定到特定的键。但我建议你用WASD而不是方向键。

我会尽力在普通的JavaScript中做到这一点，因为我不想强迫你使用任何框架，但我也会提供一个jQuery替代品。

首先，浏览器似乎注册了按键的方式有很多种。我正在寻找quirksmode.org，这是一个关于浏览器如何处理非标准或甚至标准事物的特殊信息源。我经常去那里找出“最佳实践”。

它告诉我，我可以使用的最好的（最广泛支持的）事件是​​。此外，从事件中读取按键的最可靠方法是读取event.keyCode。根据MDN，这是deprecated，你应该使用key（它被标记为未实现），但至少event.keyCode在浏览器上一致地工作。所以，你可以处理按键这样的：

document.onkeydown = function(e) { 
    var evt = e || window.event; // for more compatibility 
    var keyCode = evt.keyCode; 

    console.log(keyCode + " was pressed"); 

    switch(keyCode) { 
     case 37: // left key was pressed 
      handleLeft(); 
      e.preventDefault(); // prevents the default behaviour to trigger 
      break; 
     case 38: // up key was pressed 
      handleUp(); 
      e.preventDefault(); 
      break; 
     case 39: // right key was pressed 
      handleRight(); 
      e.preventDefault(); 
      break; 
     case 40: // down key was pressed 
      handleDown(); 
      e.preventDefault(); 
      break; 
     default: 
      // there are quite a few keycodes left :) 
      break; 
    } 
} 

keyCode是无符号整数，该encodinc要么ASCII或Windows-1252，但这是正常的密钥是相同的。如果不确定，那么按alert()或console.log()这个按键，这样你就可以检查它的代码了。

如果您正在使用jQuery的event.which属性是基于keydown事件归一化，所以你可以使用它像：

$('document').keydown(function(event) { 
    if (event.which == 37) { 
     alert('left key was pressed'); 
    } 
}); 

---

现在如何处理导航。如果我正确理解你，你想滚动窗口。

window.scroll不是标准的一部分，但是无处不在。另外window.scollBy和window.scrollByPages可帮助您滚动相对金额。

因此，例如，你可以写之前从代码中handleLeft()功能是这样的：

function handleLeft() { 
    window.scrollBy(-1 * window.innerWidth, 0); 
} 

这翻一页向左。

我相信你将能够从此构建你的代码。