JQuery kullanarak bir HTML tuvaline klavye odağını nasıl verebilirim?

Question

Javascript, jquery ve Canvas etiketini kullanarak bir oyun yapıyorum. Tuval etiketi odağa sahipken tarayıcının klavye kısayollarını işlemesini nasıl engelleyebilirim? Event.stopPropagation() yöntemini denedim ve hiçbir etkisi yok.

Klavye olaylarını alabilirim. Ancak, kullanıcı boşluk çubuğuna bastığında, web sayfası Firefox'ta aşağı kaydırılır. Aynısı ok tuşları ile olur.

Answer 1

event.preventDefault(); ürününü deneyin. Ayrıca, keypress, keydown ve keyup olayları da vardır.

Answer 2

Kök sorunu, varsayılan olarak tarayıcının tuvali "odaklanabilir" hale getirmemesidir. true contentEditable ayarlayarak Sebebi ne olursa olsun sen tabindex kullanamazsa

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

, ayrıca "odaklanabilir" tuvali yapabilirsiniz: Birlikte gelen en iyi çözüm tuval üzerine tabindex ayarlamaktır :

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

Bu başlangıçta geldi çözümdür, ama bence o tabindex seçeneği biraz daha hackier bu.

Göz önünde bulundurulması gereken diğer bir nokta, tarayıcıların içeriklerin düzenlenebilir öğelerini bir kenarlıkla belirtme eğiliminde olmalarıdır. Bu, bazı kullanıcılara kapalı olabilir. Neyse ki, css bu biraz ondan kurtulmak edebilirsiniz:

#canvas { outline: none; } 

Windows XP, Mac OSX ve Linux üzerinde Chrome 3/4/5 ve FireFox 3.0/3.5/3.6 hem çözümleri test ettik. İşte bir çalışma örneği: http://xavi.co/static/so-canvas-keyboard.html