ईएमएसस्क्रिप्ट कैनवास + jQuery - टॉगल फोकस

Question

मेरे पास एक HTML पृष्ठ लगभग 30% - 70% दो लंबवत कॉलम में विभाजित है। बाएं कॉलम में चैट फीड होता है (नोड और सॉकेट.ओ के माध्यम से संभाला जाता है), और दाएं कॉलम में एक ईएमएसस्क्रिप्ट-जेनरेट canvas होता है (canvas की आईडी के साथ)। कैनवास में एक मूल 3 डी दुनिया होती है जो उपयोगकर्ता मानक प्रथम-व्यक्ति नियंत्रण (आंदोलन के लिए WASD, माउस को 'देखने') का उपयोग करके नेविगेट कर सकता है।

डिफ़ॉल्ट रूप से, कैनवास सभी कीबोर्ड ईवेंट निगलता है। मैं कैनवास initialisation प्रक्रिया में निम्न कोड के साथ इस ठीक करने के बाद:

Module.preRun.push(function() { 
    ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT = "#canvas"; 
}); 

इस संदेश टाइप करें, मुझे मैन्युअल चैट बॉक्स पर ध्यान केंद्रित करने की अनुमति है, और सबमिट करें।

मुद्दा मैं में चल रहा हूँ कि एक बार चैट संदेश प्रस्तुत किया गया है, मैं कोशिश करते हैं और निम्न कोड के साथ कैनवास पर लौटने फोकस (खिलाड़ियों WASD के साथ 3 डी दुनिया नेविगेट करने के लिए अनुमति देने के लिए) है:

$('#canvas').focus(); 

यह नाममात्र रूप से कैनवास पर ध्यान केंद्रित करता है, लेकिन माउस और कीबोर्ड आंदोलन काम नहीं करता है। विचित्र रूप से, टैब/ब्राउज़र विंडो पर क्लिक करके और फिर कैनवास में काम करना प्रतीत होता है - फ़ोकस कैनवास में वापस कर दिया जाता है, और मैं एक बार फिर नेविगेट कर सकता हूं। $(window).blur().focus() मैन्युअल रूप से कॉल करना चाल नहीं करता है।

क्या किसी को पता है कि चैट संदेश भेजे जाने के बाद कैनवास पर फ़ोकस को कैसे बल देना है?

- अद्यतन -

मैं कैनवास के पीछे (hiddenField की आईडी के साथ) एक पाठ इनपुट क्षेत्र जोड़ दिया है और मुझे लगता है कि करने के लिए कैनवास के लिए महत्वपूर्ण घटनाओं आवंटित करने के लिए preRun समारोह का उपयोग कर रहा क्षेत्र (कैनवास किसी कारण से लगातार काम नहीं कर रहा था)।

यह ठीक काम करता है जब तक उपयोगकर्ता कैनवास बंद क्लिक करता है - उदाहरण के लिए, चैट क्षेत्र में - जिस कैनवास किसी भी कुंजीपटल या माउस इनपुट पर प्रतिक्रिया बंद हो जाता है, भले ही मैं hiddenField पर वापस फोकस ट्रिगर कर रहा हूँ (और देख सकते हैं कि यह हो रहा है)।

ऐसा लगता है कि emscripten के ध्यान केंद्रित व्यवहार के साथ पेज संघर्ष पर कुछ भी कर (विंडो ऑब्जेक्ट से बंधा, मेरा मानना ​​है) और ध्यान फिर से कैनवास को रोकता है।

निश्चित रूप से अन्य HTML तत्वों के साथ रहने के लिए emscripten कैनवास को अलगाव करने का कोई तरीका है?

Answer 1

सबसे अच्छा तरीका है कि मैं इस के लिए मिल कर लिया है - वास्तव में, आवेदन की अलग पहलुओं को पाने के लिए एक ही रास्ता (चैट & 3 डी दुनिया) सही ढंग से काम - एक iframe में emscripten कैनवास एम्बेड करने के लिए किया गया है और कार्यों को ट्रिगर करने के लिए आवश्यक होने पर क्रॉस-फ़्रेम फ़ंक्शन कॉल का उपयोग करें।

Page 
    - chat 
    - iframe 
     -- emscripten-generated page 

यह समाधान की मेरी पहली पसंद नहीं है, लेकिन यह केवल एकमात्र है जिसे मैंने काम करने में कामयाब रहा है।

Answer 2

आपको ऑब्जेक्ट tabindex="0" विशेषता जोड़कर ध्यान केंद्रित करने की आवश्यकता है।

तो यह ध्यान केंद्रित घटना ठीक से गति प्रदान करने के लिए संभव होना चाहिए:

document.querySelector("#canvas").focus() 

Answer 3

संपादित करें: CodePen के माध्यम से पूर्ण डेमो

देखें

संरचना (.js संसाधनों के लिए लिंक शामिल है):

Page 
    - emscripten-generated-page 
     - loop 
    - chat 
    - script to handle global key input handlers 

आप चाहिए कैनवास तत्व (के रूप में luke और described on MDN द्वारा नोट), के माध्यम से वैश्विक घटना श्रोताओं देते हैं पर tabindex सेट जावास्क्रिप्ट के अंतर्निहित Document इंटरफेस और फिर .triggerHandler() फोन है कि कैनवास रिटर्न सुनिश्चित करने के लिए यह डिफ़ॉल्ट स्थिति है, द्वारा नियंत्रित click:

var chatInputField = $("#message-input"); 
var canvas = $("#canvas"); 


canvas.on("click", function(e){ 
    return document.addEventListener("keyup", game.toggleKeys); 
}); 

chatInputField.on("focusin", function(e) { 
    $('#canvas').attr('tabindex', 0); 
    return document.removeEventListener("keyup", game.toggleKeys, false); 
}); 

chatInputField.on("focusout", function(e) { 
    $("#canvas").triggerHandler('click'); 
    chatInputField.attr('tabindex', 0); 
}); 

मैंने इसका परीक्षण किया है, यह काम करता है। कुंजी इनपुट प्रबंधित करने के लिए मेरी app.js फ़ाइल यहां है (लाइन 2 9 7 देखें)।

https://gist.github.com/shagamemnon/585df8dd215a949b839f8b02199af31b

एक चेतावनी: यदि आप चाहिए स्पष्ट रूप से खेल कैनवास अंदर tab कुंजी के व्यवहार को परिभाषित।