tengo - La forma más simple de detectar pulsaciones de teclas en javascript

saber que tecla se presiono jquery

Question

Tengo una idea para un juego en javascript (lo haré con EaselJS) y tendré que detectar las pulsaciones de teclas. Después de buscar en Internet, he visto muchas sugerencias (use window.onkeypress, use jQuery, etc.) pero para casi todas las opciones hay un contraargumento. ¿Qué sugieren ustedes, chicos? Usar jQuery para esto suena bastante fácil, pero prácticamente no tengo experiencia con esa biblioteca (y tampoco soy un veterano en javascript), así que preferiría evitarla. Si jQuery es la mejor opción, ¿alguien puede dar un buen ejemplo (con una explicación sería increíble) de cómo hacer esto?

Supongo que esto se pregunta mucho pero no pude encontrar respuestas claras. ¡Gracias por adelantado!

Answer 1

¡Utiliza event.key y JS moderno!

Ya no hay códigos numéricos . Puede usar "Enter" , "ArrowLeft" , "r" o cualquier nombre de clave directamente, haciendo que su código sea mucho más legible.

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Documentos de Mozilla

Navegadores compatibles

Answer 2

Con Javascript simple, el más simple es:

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

Pero con esto, solo puedes vincular un controlador para el evento.

Además, puede usar lo siguiente para poder enlazar varios manejadores al mismo evento:

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

En cualquier caso, keyCode no es consistente en todos los navegadores, por lo que hay más para verificar y descubrir. Note el e = e || window.event e = e || window.event - ese es un problema normal con Internet Explorer, colocando el evento en window.event en lugar de pasarlo a la devolución de llamada.

Referencias

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

Con jQuery:

$(document).on("keypress", function (e) {
    // use e.which
});

Referencia:

• http://api.jquery.com/on/

Además de que jQuery es una biblioteca "grande", jQuery realmente ayuda con las inconsistencias entre los navegadores, especialmente con los eventos de ventana ... y eso no se puede negar. Con suerte, es obvio que el código jQuery que proporcioné para su ejemplo es mucho más elegante y más corto, pero logra lo que quiere de una manera consistente. Debería poder confiar en que e (el evento) y e.which (el código de tecla, para saber qué tecla se presionó) son precisos. En Javascript simple, es un poco más difícil de saber a menos que haga todo lo que la biblioteca jQuery hace internamente.

Tenga en cuenta que hay un evento de keydown , que es diferente a la keypress de keypress . Puede obtener más información sobre ellos aquí: onKeyPress vs. onKeyUp y onKeyDown

En cuanto a sugerir qué usar, definitivamente sugeriría usar jQuery si está interesado en aprender el marco. Al mismo tiempo, diría que debes aprender la sintaxis, los métodos y las características de Javascript, y cómo interactuar con el DOM. Una vez que comprenda cómo funciona y qué está sucediendo, debería sentirse más cómodo trabajando con jQuery. Para mí, jQuery hace que las cosas sean más consistentes y más concisas. Al final, es Javascript y envuelve el lenguaje.

Otro ejemplo de que jQuery es muy útil es con AJAX. Los navegadores no son coherentes con la forma en que se manejan las solicitudes AJAX, por lo que jQuery resuelve eso para que no tenga que preocuparse.

Aquí hay algo que podría ayudar a decidir:

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

Answer 3

Hay algunas maneras de manejar eso; JavaScript Vanilla puede hacerlo bastante bien:

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

O una forma más estructurada de manejarlo:

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);

Answer 4

KEYPRESS
(introducir clave)

Vainilla:

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert(''hi.'')
    }
})

Taquigrafía de vainilla :

this.addEventListener(''keypress'', (event) => {
    if (event.keyCode == 13) {
        alert(''hi.'')
    }
})

jQuery:

$(this).on(''keypress'', function(event) {
    if (event.keyCode == 13) {
        alert(''hi.'')
    }
})

jQuery clásico:

$(this).keypress(function(event) {
    if (event.keyCode == 13) {
        alert(''hi.'')
    }
})

Taquigrafía jQuery:

$(this).keypress((e) => {
    if (e.which == 13) {
        alert(''hi.'')
    }
})

Incluso más corto:

$(this).keypress(e=>
    e.which==13?
    alert(''hi.''):null
)

demo