2014-07-10 9 views
9

मेरे कपड़े आवेदन में, मैं वर्तमान में कुछ महत्वपूर्ण प्रेस जैसे कि डिलीट कुंजी, और किसी भी चयनित तत्व को हटाने के लिए सुन रहा हूं। कुंजी दबाव के लिए सुनने की मेरी विधि है:fabric.js कैनवास कीबोर्ड घटनाओं के लिए सुनो?

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

मैं एक समस्या में हालांकि चल रहा हूँ: मैं पृष्ठ पर पाठ बक्से जैसे अन्य तत्वों है, और जब एक पाठ बॉक्स में टाइप, मैं नहीं करना चाहता किसी तत्व को हटाने के लिए कुंजी हटाएं।

canvas.tabIndex = 1000; 

आप कीबोर्ड की घटनाओं के साथ canvas.addEventListener उपयोग करने के लिए अनुमति देता है:

this question में, वहाँ एक विधि एक HTML5 कैनवास के लिए एक घटना श्रोता संलग्न करने के लिए वर्णित है।

क्या मैं कपड़े के कैनवास के साथ ऐसा कुछ उपयोग कर सकता हूं?

जब मैं इसे इस तरह की कोशिश की,

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

मैं: क्रोम से "Uncaught TypeError अपरिभाषित कार्य नहीं है"।

उत्तर

12

यहां मैंने जो किया है, वह है: मुझे कपड़े द्वारा इस्तेमाल किए गए कैनवास के चारों ओर एक रैपर div मिला है, और मैंने ईवेंट श्रोता को इस रैपर में जोड़ा है।

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

यह ठीक वैसे ही काम कर रहा है जैसा मैं चाहता हूं। हटाएं जो टेक्स्ट बॉक्स के अंदर होते हैं, श्रोता द्वारा उठाए जाते हैं।

संबंधित मुद्दे