如何讓鍵盤上的箭頭鍵在博客內觸發導航（上/下頁）的鏈接

到目前爲止，我拼湊起來的劇本是這樣的：如何讓鍵盤上的箭頭鍵在博客內觸發導航（上/下頁）的鏈接

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

和我的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>

{PreviousPage}/{NextPage}代碼表示動態頁面鏈接，根據您所在的頁面不同而不同。這個特定的問題是特定於tumblr，但一般也是如此：

有沒有辦法讓我的左右箭頭鍵觸發這些動態鏈接？

感謝您的閱讀和任何幫助，非常感謝。

來源

2010-02-14 dfogge

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

來源

2010-02-14 11:45:20

不錯的工作蒂姆非常感謝！ – dfogge 2010-02-14 19:30:34

什麼是'evt = evt || window.event;'關於？ – 2014-12-24 22:55:46

@MadsSkjern：適用於舊版本的Internet Explorer（最高版本和最高版本），其中事件對象不作爲參數提供給事件處理函數，而是作爲'window.event'提供。 – 2014-12-27 18:35:40

使用此來告訴您對象的keyIdentifier屬性。

<html> 
<head> 

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

然後，您可以使用if-then邏輯來忽略您不感興趣的所有按鍵，並將正確的行爲連線到您所在的位置。

以下將爲您的鏈接指定左右箭頭鍵（基於錨點/鏈接元素的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>

來源

2010-02-14 00:47:09 ecounysis

'keyIdentifier'不支持大多數瀏覽器（包括Firefox的最新版本），所以不適合在網絡上一般使用呢。 – 2010-02-14 11:40:14

感謝您的信息蒂姆。我只在Chrome中測試過它。 – ecounysis 2010-02-14 16:46:42

非常感謝你的幫助埃裏克的努力得到讚賞 – dfogge 2010-02-14 19:30:11

如何讓鍵盤上的箭頭鍵在博客內觸發導航（上/下頁）的鏈接

回答

相關問題