2009-05-22 9 views
6

नोट: एक संभावित समाधान केवल फ़ायरफ़ॉक्स 3.0 में काम करने की ज़रूरत है, मेरा ऐप आईई से एक्सेस की अनुमति नहीं देता है!ऑनक्लिक घटना में जावास्क्रिप्ट फोकस बदल रहा है?

<a href="#" onclick="show_lightbox();return false;">show lightbox</a> 

मेरे समस्या है जब लाइटबॉक्स प्रदर्शित किया जाता है, ध्यान लिंक पर बनी हुई है वह यह है कि: =)

मैं एक कड़ी है, जिसे क्लिक, उपयोगकर्ता के लिए एक लाइटबॉक्स प्रदर्शित करेगा है। तो यदि उपयोगकर्ता ऊपर या नीचे कुंजी दबाता है, तो वे मुख्य दस्तावेज़ को स्क्रॉल करते हैं, न कि प्रदर्शित होने वाले लाइटबॉक्स!

मैं इस

function focus_on_lightbox() { 
    document.getElementById('lightbox_content').focus(); 
} 

यह ठीक काम करता है अगर मैं फ़ायरबग कंसोल लिखने की तरह कोड का उपयोग कर लाइटबॉक्स तत्व को फ़ोकस सेट करने की कोशिश की है, लेकिन अगर मैं अंत में इसे शामिल काम नहीं करेगा ऑनक्लिक स्निपेट का। ऐसा लगता है कि मैं ऑनक्लिक घटना के अंदर निष्पादित कोड से लिंक से दूर फोकस नहीं बदल सकता?


- अद्यतन 1 मैंने पहले

<a href="#" onclick="show_lightbox();focus_on_lightbox();return false;">show lightbox</a> 

कुछ इस तरह की कोशिश की है और मैं कुछ डिबगिंग आउटपुट को जोड़ने के लिए समारोह संशोधित कर लिया है, के रूप में

function focus_on_lightbox() { 
    console.log('hihi'); 
    console.log(document.activeElement); 
    document.getElementById('lightbox_content').focus(); 
    console.log(document.activeElement); 
} 

उत्पादन इस प्रकार है निम्नानुसार है

hihi 
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#"> 
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#"> 

तो मैंने कुछ भी करने से पहले फोकस लिंक पर था और जब मैंने फोकस बदलने की कोशिश की तो यह अभी भी लिंक पर बना रहा?

सुनिश्चित नहीं हैं कि यह मायने रखता है, तो है, लेकिन मैं ajax का उपयोग लाइटबॉक्स लोड करने के लिए, के रूप में इस प्रकार है

new Ajax.Updater(lightbox_content_id, url, {asynchronous:true, evalScripts:true, onLoading:show_lightbox_loading(), onComplete:focus_on_lightbox() }); 

मैं ajax पूरा करने के बाद फ़ोकस सेट करने की कोशिश की, लेकिन यह भी, कोई भाग्य।

मुझे क्या याद आ रही है?


मैं एक समाधान काम है कि,, ध्यान सेट करने का प्रयास करता है, तो मैं document.activeElement की जाँच करके सफल देखकर नहीं तो द्वारा नीचे सुझाव दिया गया था बनाने के लिए, 100 मिलीसेकंड प्रतीक्षा करके पुनः प्रयास करने की कोशिश कर रहा हूँ। अगर मैं निम्नलिखित समारोह का उपयोग करें, यह

function focus_on_lightbox() { 
    var seconds_waited = 0 
    pause(100); 
    var current_focus = document.activeElement 
    while (document.getElementById(lightbox_content_id) != current_focus && seconds_waited < 2000) 
    { 
    document.getElementById(lightbox_content_id).focus(); 
    console.log(document.activeElement); 
    pause(100); 
    current_focus = document.activeElement 
    seconds_waited += 100; 
    } 
} 

काम करेंगे हालांकि, अगर मैं फ़ायरबग डिबगिंग बयान console.log निकालने के लिए, समारोह काम करना बंद !! मुझे नहीं पता कि यह मामला क्यों होगा ?? फायरबग कंसोल पर एक वैरिएबल आउटपुट क्यों प्रभावित करेगा मौसम फोकस तत्व पर ले जाया गया है या नहीं? क्या console.log कथन फोकस को प्रभावित करता है? शायद कंसोल डीबगिंग विंडो पर फोकस लाकर?

उत्तर

3

यहाँ समारोह है कि अंत में काम किया

function focus_on_lightbox(seconds) { 
    var seconds_waited 
    seconds_waited = seconds 
    document.getElementById(lightbox_content_id).focus(); 
    seconds_waited += 100; 

    if (document.getElementById(lightbox_content_id) != document.activeElement && seconds_waited < 2000) 
    setTimeout("focus_on_lightbox(" + seconds_waited + ");", 100); 
    { 
    } 
} 

तो क्यों console.log फोकस की स्थापना को प्रभावित किया है? इससे पहले कि मैं फोकस बदलने के प्रयासों के बीच इस फ़ंक्शन का उपयोग कर रहा था।

function pause(milliseconds) { 
    var dt = new Date(); 
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ } 
} 

यह जावास्क्रिप्ट को लगातार कुछ करने का कारण बनता है और मुझे लगता है कि यह दस्तावेज़ प्रस्तुत करने या अपडेट करने या कुछ करने का समय नहीं दे रहा था। Console.log इस लॉक को तोड़ने लग रहा था और पृष्ठ को अपना ध्यान बदलने का मौका देता था।

जब मैंने प्रयासों के बीच रोकने के लिए टाइमआउट का उपयोग करने के दृष्टिकोण को बदल दिया, तो console.log की अब आवश्यकता नहीं थी!

धन्यवाद सही दिशा में मुझे इंगित करने के लिए bmoeskau धन्यवाद।

4

मुझे लगता है कि आपकी समस्या झूठी वापसी के बाद आपकी फोकस विधि को कॉल कर रही है। (उदाहरण के लिए, ध्यान() कार्यान्वित तत्व से पहले पूरी तरह से ध्यान केंद्रित करने के लिए तैयार है)

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;"> 
    show lightbox 
</a> 
+0

अगर मैं मूल पोस्ट को संपादित करने में व्यस्त नहीं था, तो मैंने यह कहा होगा। – Triptych

+0

असल में मैंने कोशिश की पहली चीजों में से एक था और यह काम नहीं किया। मैं अधिक जानकारी के साथ मूल प्रश्न संपादित करूंगा। – Janak

1

मेरे अनुभव में, ध्यान केंद्रित मुद्दों कभी कभी समय से संबंधित हो सकते हैं: अपने कोड की तरह होना चाहिए। मुझे लगता है कि show_lightbox फ़ंक्शन कहलाता है जब लाइटबॉक्स मार्कअप गतिशील रूप से बनाया गया है?

setTimeout("focus_on_lightbox();", 10); 
+0

ठीक है, टाइमआउट विचार काम करता प्रतीत होता है, लेकिन यह मेरी समस्या का समाधान नहीं करता है। इसे काम करने के लिए मुझे अपना टाइमआउट 1500 तक पूरा करना पड़ा, एक साढ़े साढ़े। यह मेरे उपयोगकर्ताओं को असंगत व्यवहार देने जा रहा है। क्या यह देखने के लिए कोई तत्व है कि कोई तत्व फोकस प्राप्त करने के लिए तैयार है या नहीं? – Janak

0

तत्व में ही ध्यान केंद्रित करें: अगर ऐसी बात है तो आप कि इससे समस्या, जैसे कुछ है देखने के लिए ध्यान केंद्रित करने के प्रयास करने से पहले कुछ देरी जोड़ने की कोशिश कर सकता है। तत्व के लोड ईवेंट पर, कुछ एमएस का टाइमआउट सेट करें और फिर इसे कॉल करें। फोकस();

अन्य कोशिश करें jQuery।