2014-07-10 18 views
9

Nell'applicazione tessuto, sto attualmente ascoltando determinate pressioni dei tasti come il tasto cancella e l'eliminazione di qualsiasi elemento selezionato. Il mio metodo di ascolto per le pressioni dei tasti è:fabric.js canvas ascolta gli eventi della tastiera?

document.onkeydown = function(e) { 
    if (46 === e.keyCode) { 
    // 46 is Delete key 
    // do stuff to delete selected elements 
} 

Io corro in un problema però: ho altri elementi come caselle di testo sulla pagina, e quando si digita in una casella di testo, non voglio il cancella la chiave per cancellare qualsiasi elemento.

In this question, c'è un metodo descritto per collegare un listener di eventi per una tela HTML5:

canvas.tabIndex = 1000; 

consente di utilizzare canvas.addEventListener con eventi di tastiera.

Posso utilizzare qualcosa di simile a questo con la tela del tessuto?

Quando ho provato in questo modo,

var CANVAS = new fabric.Canvas('elemID', {selection: false}) 
CANVAS.tabIndex = 1000; 
CANVAS.addEventListener("keydown", myfunc, false); 

ottengo "TypeError Uncaught: undefined non è una funzione" da Chrome.

risposta

12

Ecco cosa ho fatto: ho un div wrapper attorno al canvas usato da fabric e ho aggiunto il listener di eventi a questo wrapper.

var canvasWrapper = document.getElementById('canvasWrap'); 
canvasWrapper.tabIndex = 1000; 
canvasWrapper.addEventListener("keydown", myfunc, false); 

Questo funziona esattamente come voglio. Il elimina le pressioni che si verificano all'interno di una casella di testo non vengono raccolte dall'ascoltatore.

Problemi correlati