Javascript 如何让键盘上的箭头键触发博客中的导航（上一页/下一页）链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2259690/
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
how to get the arrow keys on the keyboard to trigger navigation (previous/next page) links within a blog
提问by dfogge
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. this particular question is specific to tumblr, but generally as well:
{PreviousPage} / {NextPage} 代码代表动态页面链接，根据您所在的页面而有所不同。这个特定问题是 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.
感谢您的阅读，非常感谢您对此的任何帮助。
回答by Tim Down
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;
}
};
回答by eric.christensen
Use this to tell you the keyIdentifierattribute of the object.
使用它来告诉您对象的keyIdentifier属性。
<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>
