onkeydown 使用箭头键向前和向后导航

Question

我尝试使用左右箭头键导航 onkeydown 以抛出我的网站。使用我的很棒的字体链接，它可以正常工作，但我希望它也可以使用键盘上的箭头键在 keydown 上工作。

一个问题是，我的网站使用德语和英语的本地化。这就是为什么我的 url 看起来像这样：

https://www.example.com/de https://www.example.com/en

https://www.example.com/de/Arbeiten https://www.example.com/en/Projects

这是我的 HTML:

<div>
    <a href="{{ route('contact') }}" onkeydown="if(e.keyCode == 37) ? window.location.href={{ route('contact')  }} : " class="left-arrow arrow-home-left">
        <i class="fas fa-angle-left fa-5x"></i>
    </a>
</div>


<div>
    <a href="{{ route('projects') }}" onkeydown="if(e.keyCode == 39) ? window.location.href={{ route('projects') }} : " class="right-arrow arrow-home-right">
        <i class="fas fa-angle-right fa-5x"></i>
    </a>
</div>

还有我的CSS：

body {
  background-color: green;
}

.arrow-home-right {
    display: inline;
    top: 50%;
    right: 0;
    color: white;
    background-color:red;
    position: fixed;
}

.arrow-home-left {
    display: inline;
    top: 50%;
    left: 0;
    color: white;
    background-color:red;
    position: fixed;
}

.arrow-home-right:hover, .arrow-home-left:hover {
    display: inline;
    color: black;
}

这是我的 JSFiddle： https://jsfiddle.net/djosxy7z/15/

我想使用箭头键 onkeydown 跳转到下一个 site/page。使用很棒的字体链接它可以工作，但不能使用键盘。

希望有人能给我提示。 :)

e: 是不是一定要在body上调用onkeydown函数？

Answer 1

您可以使用 body 标签捕获 keydown 事件。这是一个例子：

<body onload="onload_handler()">
    <div>
        <a  href="{{ route('contact')}}" class="left-arrow arrow-home-left">
            <i class="fas fa-angle-left fa-5x"></i>
        </a>
    </div>
    <p></p>
    <div>
        <a  href="{{ route('projects')}}"  class="right-arrow arrow-home-right">
            <i class="fas fa-angle-right fa-5x"></i>
        </a>
    </div>
    <script>
    function onload_handler() {
        document.body.addEventListener("keydown", keydown_handler);
    }
    function keydown_handler(e) {
        let txt = "keydown_handler: keycode = " + e.keyCode;
        let anchor = 0;
        if(e.keyCode == 37) {
            anchor = document.body.querySelector(".left-arrow")
            txt = txt + ": left arrow";
        } else if(e.keyCode == 39) {
            anchor = document.body.querySelector(".right-arrow")
            txt = txt + ": right arrow";
        }
        if(anchor)
            txt = txt + ": " + anchor.href;
        console.log(txt);
        if(anchor)
            anchor.click();
    }
    </script>
</body>

Here is a link to the same site 您发布 fiddle 的地方，使用上面的示例。该示例显示了您在控制台中按下的键。

onkeydown 使用箭头键向前和向后导航

onkeydown navigate forward and backward with arrows key

html

javascript

jquery

onkeydown