web-dev-qa-db-fra.com

Le moyen le plus simple de détecter les pressions de touche en javascript

J'ai une idée pour un jeu en javascript (je vais le faire avec EaselJS) et je vais devoir détecter les pressions de touches. Après avoir regardé sur Internet, j'ai vu beaucoup de suggestions (utiliser window.onkeypress, utiliser jQuery, etc.), mais il existe un contre-argument pour presque toutes les options. que proposez-vous les gars? Utiliser jQuery pour cela semble assez facile, mais je n’ai pratiquement aucune expérience de cette bibliothèque (et je ne suis pas particulièrement expérimenté chez javascript non plus), je préfère donc l’éviter. Si jQuery est la meilleure option, quelqu'un peut-il donner un bon exemple (avec une explication serait génial) de la façon de procéder?

Je suppose que cela se pose souvent mais je n'ai pas pu trouver de réponse claire. Merci d'avance!

javascriptjqueryhtml5keyboardeaseljs
52
bobismijnnaam

Avec Javascript simple, le plus simple est:

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

Mais avec cela, vous ne pouvez lier qu'un seul gestionnaire pour l'événement.

En outre, vous pouvez utiliser les éléments suivants pour pouvoir potentiellement lier plusieurs gestionnaires au même événement:

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;
    }
}

Dans les deux cas, keyCode n'est pas cohérent entre les navigateurs, il y a donc plus à vérifier et à comprendre. Remarquez le e = e || window.event - C’est un problème normal avec Internet Explorer, qui place l’événement dans window.event au lieu de le transmettre au rappel.

Les références:

Avec jQuery:

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

Référence:

Hormis le fait que jQuery soit une "grande" bibliothèque, jQuery contribue réellement à éliminer les incohérences entre les navigateurs, en particulier les événements de fenêtre ... et cela ne peut pas être refusé. Espérons qu'il est évident que le code jQuery que j'ai fourni pour votre exemple est beaucoup plus élégant et plus court, tout en réalisant ce que vous voulez de manière cohérente. Vous devriez pouvoir faire confiance à e (l'événement) et à e.which (le code de clé pour savoir quelle touche a été enfoncée) est exact. En clair, il est un peu plus difficile de savoir si vous ne faites pas tout ce que la bibliothèque jQuery fait en interne.

Notez qu'il existe un événement keydown différent de keypress. Vous pouvez en apprendre plus à leur sujet ici: onKeyPress Vs. onKeyUp et onKeyDown

Pour ce qui est de suggérer quoi utiliser, je suggérerais certainement d’utiliser jQuery si vous êtes prêt à apprendre le framework. Dans le même temps, je dirais que vous devez apprendre la syntaxe, les méthodes, les fonctionnalités et la manière de Javascript, et comment utiliser le DOM Une fois que vous avez compris comment cela fonctionne et ce qui se passe, vous devriez être plus à l'aise avec jQuery. Pour moi, jQuery rend les choses plus cohérentes et plus concises. En fin de compte, c'est Javascript, et enveloppe le langage.

AJAX est un autre exemple d'utilisation très utile de jQuery. Les navigateurs ne sont pas cohérents avec la façon dont les requêtes AJAX sont traitées), donc des résumés jQuery ne vous inquiétez donc pas.

Voici quelque chose qui pourrait aider à décider:

72
Ian

[~ # ~] appuyez sur la touche [~ # ~]
(la touche Entrée)

Vanille: 

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

Sténographie Vanille :

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

jQuery: 

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

jQuery classical: 

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

jQuery en abrégé: 

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

Encore plus court: 

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

démo

21
Thielicious

Utilisation event.key et JS moderne!

Plus de codes de numéro . Vous pouvez utiliser "Enter", "ArrowLeft", "r", ou tout nom de clé directement, ce qui rend votre code beaucoup plus lisible.

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

Mozilla Docs

Navigateurs pris en charge

10
Gibolt

Il y a plusieurs façons de gérer cela. Vanilla JavaScript peut très bien le faire:

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
    };
};

Ou une manière plus structurée de le gérer:

(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);
6
faino