pulsada - saber que tecla esta presionada javascript
Detección de pulsaciones de teclas de flecha en JavaScript (16)
¿Cómo detecto cuando se presiona una de las teclas de flecha? Utilicé esto para descubrir:
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}
Aunque funcionó para todas las demás teclas, no para las teclas de flecha (tal vez porque se supone que el navegador se desplaza en estas teclas de forma predeterminada).
event.key === "ArrowRight" ...
Más reciente y mucho más limpio: use event.key . No más códigos de números arbitrarios! Si está transpilando o sabe que sus usuarios están todos en navegadores modernos, ¡use esto!
node.addEventListener(''keydown'', function(event) {
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});
Manipulación verbosa:
switch (event.key) {
case "ArrowLeft":
// Left pressed
break;
case "ArrowRight":
// Right pressed
break;
case "ArrowUp":
// Up pressed
break;
case "ArrowDown":
// Down pressed
break;
}
Puede extender esto fácilmente para verificar "w", "a", "s", "d" , o cualquier otra tecla
PS event.code es el mismo para las flechas
¡Esta biblioteca mola! https://craig.is/killing/mice
Mousetrap.bind(''up up down down left right left right b a enter'', function() {
highlight([21, 22, 23]);
});
Sin embargo, debe presionar la secuencia un poco rápido para resaltar el código en esa página.
Aquí hay una implementación de ejemplo:
var targetElement = $0 || document.body;
function getArrowKeyDirection (keyCode) {
return {
37: ''left'',
39: ''right'',
38: ''up'',
40: ''down''
}[keyCode];
}
function isArrowKey (keyCode) {
return !!getArrowKeyDirection(keyCode);
}
targetElement.addEventListener(''keydown'', function (event) {
var direction,
keyCode = event.keyCode;
if (isArrowKey(keyCode)) {
direction = getArrowKeyDirection(keyCode);
console.log(direction);
}
});
Así es como lo hice:
var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
delete keystate[e.keyCode];
});
if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}
En la tecla arriba y abajo de la función de llamada. Hay diferentes códigos para cada tecla.
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == ''38'') {
// up arrow
}
else if (e.keyCode == ''40'') {
// down arrow
}
else if (e.keyCode == ''37'') {
// left arrow
}
else if (e.keyCode == ''39'') {
// right arrow
}
}
Ese es el código de trabajo para chrome y firefox.
<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">
function leftArrowPressed() {
alert("leftArrowPressed" );
window.location = prevUrl
}
function rightArrowPressed() {
alert("rightArrowPressed" );
window.location = nextUrl
}
function topArrowPressed() {
alert("topArrowPressed" );
window.location = prevUrl
}
function downArrowPressed() {
alert("downArrowPressed" );
window.location = nextUrl
}
document.onkeydown = function(evt) {
var nextPage = $("#next_page_link")
var prevPage = $("#previous_page_link")
nextUrl = nextPage.attr("href")
prevUrl = prevPage.attr("href")
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed(nextUrl);
break;
case 38:
topArrowPressed(nextUrl);
break;
case 39:
rightArrowPressed(prevUrl);
break;
case 40:
downArrowPressed(prevUrl);
break;
}
};
</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a>
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
</p>
</body>
</html>
Eso es mas corto
function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }
He podido atraparlos con jQuery:
$(document).keypress(function (eventObject) {
alert(eventObject.keyCode);
});
Un ejemplo: http://jsfiddle.net/AjKjU/
Posiblemente la formulación más tersa:
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert(''left'');
break;
case 38:
alert(''up'');
break;
case 39:
alert(''right'');
break;
case 40:
alert(''down'');
break;
}
};
Demostración (gracias al usuario Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/
Esto debería funcionar en varios navegadores. Deja un comentario si hay un navegador donde no funciona.
Hay otras formas de obtener el código clave (e.which, e.charCode, y window.event en lugar de e), pero no deberían ser necesarias. Puede probar la mayoría de ellos en http://www.asquare.net/javascript/tests/KeyCode.html . Tenga en cuenta que event.keycode no funciona con onkeypress en Firefox, pero sí funciona con onkeydown.
Re respuestas que necesita keydown no keypress .
Suponiendo que desea mover algo continuamente mientras se presiona la tecla, encuentro que la keydown funciona para todos los navegadores, excepto para Opera. Para Opera, keydown solo se activa en la primera pulsación. Para acomodar el uso de Opera:
document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
También estaba buscando esta respuesta hasta que encontré esta publicación.
He encontrado otra solución para conocer el código clave de las diferentes claves, cortesía a mi problema. Solo quería compartir mi solución.
Simplemente use keyup / keydown event para escribir el valor en la consola / alertar usando event.keyCode . me gusta-
console.log(event.keyCode)
// or
alert(event.keyCode)
- rupam
Use keydown , no keypress para las keypress no imprimibles como las teclas de flecha:
function checkKey(e) {
e = e || window.event;
alert(e.keyCode);
}
document.onkeydown = checkKey;
La mejor referencia de evento de clave de JavaScript que he encontrado (por ejemplo, venciendo el pantalón de modo quirks) está aquí: http://unixpapa.com/js/key.html
controla los códigos clave %=37 y &=38 ... y solo las teclas de flecha izquierda = 37 arriba = 38
function IsArrows (e) {
return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40));
}
las teclas de flecha solo se activan con onkeydown , no con onkeypress
Los códigos clave son:
- izquierda = 37
- arriba = 38
- derecho = 39
- abajo = 40
function checkArrowKeys(e){
var arrs= [''left'', ''up'', ''right'', ''down''],
key= window.event? event.keyCode: e.keyCode;
if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;