Intento navegar con la tecla hacia abajo con las teclas de flecha hacia la izquierda y hacia la derecha en mi sitio web. Con mis enlaces impresionantes de fuente está funcionando, pero quiero que también funcione con las teclas de flecha en mi teclado.
Un problema es que mi sitio usa localización para alemán e inglés. Es por eso que mi URL se ve así:
https://www.example.com/de https://www.example.com/en
https://www.example.com/de/Arbeiten https://www.example.com/en/Proyectos
Aquí está mi 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>Y mi 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; }Aquí está mi JSFiddle: https://jsfiddle.net/djosxy7z/15/
Quiero saltar al siguiente sitio/página con las teclas de flecha hacia abajo. Con la fuente Awesome Links está funcionando, pero no con el teclado.
Espero, alguien me puede dar una pista. :)
e: ¿Tengo que llamar a la función onkeydown en el cuerpo?
Puede capturar el evento keydown con su etiqueta de cuerpo. Aquí hay un ejemplo:
<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>Aquí hay un enlace al mismo sitio en el que publicó su violín, usando el ejemplo anterior. El ejemplo muestra qué teclas presiona en la consola.