Come si conferisce una tela HTML alla messa a fuoco della tastiera usando jquery?

Question

Sto implementando un gioco usando Javascript, jquery e il tag Canvas. Come posso impedire al browser di elaborare scorciatoie da tastiera quando il tag canvas ha lo stato attivo? Ho provato event.stopPropagation() e non ha alcun effetto.

Posso rilevare gli eventi della tastiera. Tuttavia, quando l'utente preme la barra spaziatrice, la pagina Web scorre verso il basso in Firefox. Lo stesso succede con i tasti freccia.

Answer 1

Prova event.preventDefault();. Inoltre ci sono keypress, keydown, e keyup eventi ... si potrebbe provare ciascuno di loro per vedere quale funziona.

Answer 2

Il problema di root è che per impostazione predefinita il browser non rende "selezionabile" la tela. La soluzione migliore che potrei venire in mente è di impostare la tabindex sulla tela:

$("#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; }); 

Se per qualsiasi motivo non è possibile impostare la tabindex, si può anche fare la tela "attivabile" impostando contentEditable true :

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

Questa è la soluzione mi è venuta in origine, ma a mio parere è un po 'hackier rispetto all'opzione tabindex.

Un'altra cosa da considerare è che i browser tendono a delineare gli elementi modificabili del contenuto con un bordo. Questo può essere scoraggiante per alcuni utenti. Fortunatamente, è possibile sbarazzarsi di esso con questo po 'di css:

#canvas { outline: none; } 

Ho provato entrambe le soluzioni in Chrome 3/4/5 e Firefox 3.0/3.5/3.6 da Windows XP, Mac OSX e Linux. Ecco un esempio funzionante: http://xavi.co/static/so-canvas-keyboard.html