फ़ायरफ़ॉक्स कर्सर अदृश्य, किसी और चीज पर क्लिक करते समय दृश्यमान हो जाता है

Question

मेरे पास अब तक का सबसे अजीब बग है, और मैं इस पर अपने बुद्धि के अंत के पास हूं। इस (या किसी भी चालाक कामकाज) को डीबग करने के तरीकों के साथ कोई भी अद्भुत होगा।

समस्या:

मैं contenteditable का उपयोग कर फ़ायरफ़ॉक्स में एक सरल WYSIWYG संपादक बना रहा हूं। समस्या तब प्रकट होती है जब मैं AJAX के माध्यम से संपादित करने के लिए पाठ लोड करता हूं। लोड से पहले, कर्सर ठीक दिखाई देता है (एक विभाजित दूसरे के लिए), और पाठ लोड होने के बाद गायब हो जाता है। आप अभी भी टेक्स्ट दर्ज कर सकते हैं, और कर्सर निश्चित रूप से अभी भी "वहां" है (एक स्टेटस बॉक्स वर्तमान लाइन/कॉल को ठीक दिखाता है), लेकिन कर्सर दिखाई नहीं दे रहा है और चयन ओवरले दिखाई नहीं देता है।

यहां यह वास्तव में अजीब बनाता है: किसी अन्य डोम तत्व पर, किसी भी अन्य तत्व पर, किसी अन्य विंडो पर भी क्लिक करके - कर्सर वापस लौटाता है और सामान्य की तरह व्यवहार करता है। असल में, कर्सर की कोई समस्या होने पर एक ही समय में शुरुआत होती है, जब शुरुआत में पृष्ठ लोड हो या रीफ्रेश हो। Contentedtiable div के अंदर कहीं भी क्लिक करने से यह ठीक नहीं होता है - आपको रीफ्रेश करने के लिए इसके लिए बाहर क्लिक करना होगा।

अभी, मुझे बस एक कामकाज की आवश्यकता है। मैंने $ (someelement) .click या $ (somelement)। 500 पर 500 स्वादों का प्रयास किया है, लेकिन वे उपयोगकर्ता से "वास्तविक" क्लिक को पूरी तरह से दोहराने नहीं देते हैं।

क्या किसी ने इससे पहले ऐसा कुछ देखा है? धन्यवाद।

Answer 1

ठीक है, मैं क्या समस्या हो रही है भी नहीं मिला है, लेकिन मैंने पाया एक त्वरित और गंदा ठीक काम कर देता है। मैं सिर्फ डीओएम को एंकर टैग जोड़ता हूं, इसे फोकस करता हूं (jQuery। फोकस का उपयोग करके), और फिर इसे हटा दें।

मैंने कोशिश की। कई बार पहले ध्यान दें, लेकिन मैंने हमेशा इसे div या li तत्वों पर कोशिश की, जिसने चाल नहीं की। यह एक एंकर टैग होना चाहिए। मुझे संदेह है क्योंकि एंकर टैग में वास्तव में इसके फोकस के लिए कुछ दृश्य घटक होता है, जो फ़ायरफ़ॉक्स के आंतरिक कर्सर डिस्प्ले तंत्र में कुछ रीसेट करता है।

किसी भी तरह से, यदि आप इस तरह की समस्याओं को हल करने की कोशिश कर रहे हैं और यह ठीक नहीं करता है, तो मॉर्गनटीली के स्पष्टीकरण को देखें - जो आपको कुछ अच्छी लीड दे सकता है।

Answer 2

ऐसा इसलिए है क्योंकि जब आप सामग्री लोड करते हैं, तो आप HTML नोड्स की संरचना बदल रहे हैं और इस प्रकार चयन को अमान्य कर रहे हैं (एक कर्सर केवल एक संक्षिप्त चयन है)। मैं इसे Rangy के माध्यम से रीसेट करने का प्रयास करने की अनुशंसा करता हूं। यह jquery के साथ संयोजन में अच्छी तरह से काम करता है। अपनी सामग्री में पहला तत्व प्राप्त करने के लिए jquery का उपयोग करें उपयुक्त क्षेत्र, उदा। पहला पैराग्राफ, फिर एक नई रेंजी रेंज बनाएं और शुरू करने के लिए उस पैराग्राफ (नोड) और पतन का चयन करें। यह कर्सर को आपकी सामग्री की शुरुआत में ही रखेगा। यहाँ कुछ किसी न किसी कोड

$(document).ready(function() { 
    //init rangy 
}); 

function ajaxLoaded { 
    var p = $(".contenteditablediv p:first")[0]; 
    var sel = rangy.getSelection(); 
    sel.collapse(p, 0); 
}