简体   繁体   English

如何获取键盘上的箭头键以触发博客中的导航(上一页/下一页)链接

[英]how to get the arrow keys on the keyboard to trigger navigation (previous/next page) links within a blog

the script i've pieced together so far looks like this: 我到目前为止拼凑在一起的脚本看起来像这样:

<script type="text/javascript">
/* KEYNAV */
document.onkeydown = function(e) {
if (! e) var e = window.event;
var code = e.charCode ? e.charCode : e.keyCode;
if (! e.shiftKey && ! e.ctrlKey && ! e.altKey && ! e.metaKey) {
if (code == Event.KEY_LEFT) {
if ($('previous_page_link')) location.href = $('previous_page_link').href;
} else if (code == Event.KEY_RIGHT) {
if ($('next_page_link')) location.href = $('next_page_link').href;}
}
}); 
</script>

and my html looks like this: 我的HTML看起来像这样:

<p>
{block:PreviousPage}
<a id="previous_page_link" href="{PreviousPage}">PREVIOUS PAGE</a> 
{/block:PreviousPage}

{block:NextPage}
<a id="next_page_link" href="{NextPage}">NEXT PAGE</a>
{/block:NextPage}
</p>

the {PreviousPage} / {NextPage} code represents dynamic page links which are different depending on which page you are on. {PreviousPage} / {NextPage}代码表示动态页面链接,这取决于您所在的页面。 this particular question is specific to tumblr, but generally as well: 这个特殊问题特定于tumblr,但通常也是如此:

is there a way to get my left and right arrow keys to trigger these dynamic links? 有没有办法让我的左右箭头键触发这些动态链接?

thank you for reading and any help with this is greatly appreciated. 感谢您的阅读和任何帮助,非常感谢。

function leftArrowPressed() {
   // Your stuff here
}

function rightArrowPressed() {
   // Your stuff here
}

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
    }
};

Use this to tell you the keyIdentifier attribute of the 用它来告诉你keyIdentifier属性 object. 宾语。

<html>
<head>

<script type="text/javascript">
  document.onkeydown = function() {
  alert (event.keyIdentifier);
}; 
</script>
</head>
<body>
</body>
</html>

Then you can use if-then logic to ignore all key presses you aren't interested in, and wire the correct behavior to the ones you are. 然后,您可以使用if-then逻辑忽略您不感兴趣的所有按键,并将正确的行为连接到您的行为。

The following will assign the left and right arrow keys to your links (based on the id of the anchor/link elements). 以下内容将左右箭头键分配给您的链接(基于锚点/链接元素的ID)。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
            document.onkeydown = function() 
                {
                    var j = event.keyIdentifier
                    if (j == "Right")
                        window.location = nextUrl
                    else if (j == "Left")
                        window.location = prevUrl            
                        }
                   });

      $(document).ready(function() {
                    var nextPage = $("#next_page_link")
                    var prevPage = $("#previous_page_link")
                    nextUrl = nextPage.attr("href")
                    prevUrl = prevPage.attr("href")
                });

</script>
</head>
<body>
<p>
    <a id="previous_page_link" href="http://www.google.com">Google</a> 
    <a id="next_page_link" href="http://www.yahoo.com">Yahoo</a>
</p>
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM