Comment attribuer une mise en évidence du clavier à un canevas HTML en utilisant jquery?

Je me suis mise en œuvre d'un jeu à l'aide de Javascript, jquery, et la balise Canvas. Comment puis-je empêcher le navigateur de traitement raccourcis clavier lorsque la balise canvas a le focus? J'ai essayé de l'événement.stopPropagation() et il n'a pas d'effet.

Je peux ramasser les événements de clavier. Cependant, lorsque l'utilisateur appuie sur la barre d'espace, la page défile vers le bas dans Firefox. La même chose se passe avec les touches fléchées.

source d'informationauteur Steve Hanov

  1. 32

    La racine du problème est que par défaut le navigateur ne prend pas en faire de la toile "peut recevoir le focus". La meilleure solution que je pouvais venir est de définir la tabindex sur la toile:

    $("#canvas")
    //Add tab index to ensure the canvas retains focus
    .attr("tabindex", "0")
    //Mouse down override to prevent default browser controls from appearing
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(){ /* ... game logic ... */ return false; });

    Si pour quelque raison vous ne pouvez pas définir la tabindexvous pouvez également faire de la toile "peut recevoir le focus", le réglage contentEditable vrai:

    //Add content editable to help ensure the canvas retains focus
$("#canvas").attr("contentEditable", "true")
$("#canvas")[0].contentEditable = true;

    C'est la solution que j'ai développée à l'origine, mais à mon avis c'est un peu hackier que le tabindex option.

    Une autre chose à considérer est que les navigateurs ont tendance à décrire le contenu les éléments modifiables avec une bordure. Cela peut être rebutant pour certains utilisateurs. Heureusement, vous pouvez vous débarrasser de celui-ci avec ce peu de css:

    #canvas { outline: none; }

    J'ai testé les deux solutions en Chrome 3/4/5 et FireFox 3.0/3.5/3.6 sur Windows XP, Mac OSX et Linux. Voici un exemple de travail: http://xavi.co/static/so-canvas-keyboard.html

  2. 3

    Essayer event.preventDefault();. Il y a aussi keypresskeydownet keyup événements... vous pouvez essayer chacun d'eux pour voir ce qui fonctionne.