befestigen Sie die Tastatur-Ereignisse, um html5-canvas

Sieht es aus wie mouse events hinzufügen Zuhörer canvas Elemente in Ordnung, aber keyboard events scheinen nicht zu funktionieren für canvas Elemente.

Beispiel:
http://jsfiddle.net/H8Ese/1/

Browser:
Chrome 14.0
FF 5.0.1

Ich weiß, dass ich kann verwenden Sie die document-level-Hörer, aber ich versuche, das Canvas-element Erster (so, dass die Tastatur funktioniert überall sonst auf der Seite).

Irgendwelche Ideen, wie man das key-event-listening-arbeiten auf Leinwand-Elemente?

InformationsquelleAutor Jacksonkr | 2011-09-30
  1. 9

    Ich glaube nicht, können Sie fügen Sie Tastatur-Ereignis-listener direkt auf die Leinwand. Wenn Sie nicht möchten, registrieren event-handler des Fensters in der Ebene, dann denke ich, Sie können wickeln Sie die Leinwand innerhalb eines div und registrieren Tastatur-Ereignisse auf die div.

    <div id="canvasWrapper" style="border:1px solid;   width:600px; height:400px;">
        <canvas id="canvas" width="600" height="400" >
            Could not create Canvas!
        </canvas>
</div>

jQuery("#canvasWrapper").keypress(function(e){
keys[e.keyCode] = true;
alert("key pressed!");
});

    Weiterer interessanter Ansatz ist die Verwendung von tabIndex auf das canvas-tag und binden Tastendruck auf die Leinwand. Ich habe aktualisiert, der code auf jsfiddle, einfügen auch hier für zukünftige Referenzen.

    <canvas id="my-canvas" tabindex="1"></canvas>


$("#my-canvas").bind({
keydown: function(e) {
    var key = e.keyCode;
   var elem=document.getElementById("my-canvas");

    var context=elem.getContext("2d");
    context.font = "bold 20px sans-serif";
    context.clearRect(0,0,300,200);
    context.fillText("key pressed " + key, 10,29);

},

focusin: function(e) {
    $(e.currentTarget).addClass("selected");
},

focusout: function(e) {
    $(e.currentTarget).removeClass("selected");
}
});
$("#my-canvas").focus();
    • Am Anfang hat bei mir nicht funktioniert, aber wenn ich die Maus-klicken Sie auf die div/Leinwand, dann feuert Sie. Ich vermute, es ist ein Fokus-Problem. Edit - yep, die Antwort erklärt, wie Sie den Fokus auf eine Leinwand.
    InformationsquelleAutor Shamaila Tahir
Schreibe einen Kommentar