Tumblr 风格键盘导航答案

【问题标题】：Tumblr Style Keyboard NavigationTumblr 风格键盘导航
【发布时间】：2010-12-09 23:46:31
【问题描述】：

我不太了解它是如何工作的。我的猜测是 JavaScript，但无论如何。

当您转到 Tumblr 中的仪表板时，您可以使用键盘在供稿中的页面之间来回切换。 ← 转到较新的帖子，→ 转到较旧的帖子。

谁能帮我弄清楚他们是如何做到这一点的。

【问题讨论】：

标签： javascript html keyboard-shortcuts keyboard-events tumblr

【解决方案1】：

好吧，您要做的是为您的文档元素设置一个“keyup”事件侦听器，该侦听器读取您的用户按下了哪个键，然后如果键码与您的左键或右键的代码匹配，则执行一个操作。

“左”键的键码是 37。右是 39。所以您要设置的“左”键的监听器是这样的：

document.onkeyup = function(e){
  if (e.keyCode == 37) { //"left" key.
    //your code
  }
  if (e.keyCode == 39) { //"right" key.
    //your code
  }
}

【讨论】：

我如何让它在页面之间来回切换？
我认为这取决于。您要准确浏览哪些页面？喜欢这个人的历史？
来回浏览我正在处理的 Tumblr 博客的页面。

【解决方案2】：

想通了：

<script type="text/javascript">
document.onkeyup = KeyCheck;       

    function KeyCheck(e)
        {
           var KeyID = (window.event) ? event.keyCode : e.keyCode;

           switch(KeyID)
           {

              case 37:
              window.location = "{PreviousPage}";
              break;


              case 39:
              window.location = "{NextPage}";
              break;
           }
        }
</script>

【讨论】：