दो divs के बीच एक संतोषजनक div में कैरेट/कर्सर स्थिति कैसे सेट करें।

Question

निम्नलिखित सामग्री योग्य div पर विचार करें।

<div contenteditable="true"> 
<div>bold text</div><div>bold text</div> 
</div> 

अगर मैं दो divs के बीच कर्सर भी स्थित है और पाठ टाइप करना आरंभ बाहर के बजाय दो divs के बीच एक नया पाठ नोड डालने के बोल्ड आता है। वही होता है यदि आप घर पर आते हैं और पहले div के सामने कुछ टाइप करने का प्रयास करते हैं। यह पहले div का हिस्सा बन जाता है।

यदि मैं चयन से लौटाई गई सीमा के प्रारंभकर्ता का निरीक्षण करता हूं, तो मुझे उम्मीद है कि मैं एक खाली टेक्स्ट नोड के बजाय div में से एक के लिए सामग्री प्राप्त करूंगा।

इस http://jsfiddle.net/9ZZpX/3/

सवाल क्यों होता है है देखते हैं? मैं divs के बीच स्पॉट का चयन कैसे कर सकता हूं ताकि जब मैं कुछ टाइप करूं तो यह बोल्ड नहीं होता है? (जाहिर है, मैं एक जगह जोड़ सकता हूं और यह समस्या के आसपास काम करता है लेकिन यह काफी बदसूरत है।)

यदि आप स्थिति अपडेट बॉक्स में @mention दर्ज करते हैं और HOME दबाते हैं तो आप फेसबुक पर यह सही ढंग से काम कर सकते हैं। यदि आप टेक्स्ट टाइप करते हैं तो हाइलाइट नहीं किया जाएगा।

एकमात्र चीज जिसे मैं सोचने में सक्षम हूं, वह कुंजीपटल को रोक रहा है और प्रोग्राम नोड को टेक्स्ट नोड डालने वाला है लेकिन यह बदसूरत लगता है।

मैंने पागल की तरह खोज की और किसी भी संदर्भ को नहीं मिला जो दस्तावेज करता है कि यह वास्तव में काम करने के लिए कैसे माना जाता है। स्पष्ट रूप से कुछ ऐसा है जो मुझे समझ में नहीं आता है और दस्तावेज वास्तव में इस क्षेत्र में कमी है।

(मैं जो भी करने में सक्षम होना चाहता हूं वह पता लगाता है कि कर्सर इन divs में से किसी एक में प्रवेश करने जा रहा है और उस पर कूदने के बारे में है। यदि दो divs एक दूसरे के बगल में हैं, तो कर्सर एक में कूदता है divs और यह काम करता है MUCKs) मैं क्या कर रहा हूँ पर

और जानकारी:। http://a-software-guy.com/2012/12/the-horrors-of-cursor-positioning-in-contenteditable-divs/

Answer 1

ब्राउज़र इस पर असंगत हैं। फ़ायरफ़ॉक्स आपको अधिकांश ब्राउज़रों की तुलना में अधिक पदों पर कैरेट की स्थिति देगा, लेकिन वेबकिट और आईई दोनों के पास वैध कैरेट स्थितियों के बारे में निश्चित विचार हैं और निकटतम वैध स्थिति के अनुरूप चयन में आपके द्वारा जोड़े गए एक श्रेणी में संशोधन करेंगे। यह समझ में आता है: अलग-अलग दस्तावेज़ स्थितियां हैं और इसलिए एक ही दृश्य देखभाल स्थान के लिए व्यवहार उपयोगकर्ता के लिए भ्रमित है। हालांकि, यह डेवलपर के लिए लचीलापन की लागत पर आता है।

यह कहीं भी दस्तावेज नहीं है। current Selection spec इसके बारे में कुछ भी नहीं कहता है, मुख्य रूप से क्योंकि जब कोई ब्राउज़र उनके चयन एपीआई लागू नहीं करता है और दस्तावेज के वर्तमान spec के लिए कोई समान व्यवहार नहीं होता है तो कोई विशिष्टता मौजूद नहीं होती है।

एक विकल्प keypress ईवेंट को आपके द्वारा सुझाए जाने वाले ईवेंट को अवरुद्ध करना होगा, हालांकि जब उपयोगकर्ता संपादन या संदर्भ मेनू का उपयोग करके सामग्री में चिपकता है तो यह मदद नहीं करेगा। एक और माउस और प्रमुख घटनाओं का उपयोग करके चयन का ट्रैक रखना होगा, देखभाल के लिए शून्य-चौड़ाई वाले स्पेस कैरेक्टर के साथ तत्व बनाएं, और आवश्यक होने पर देखभाल में एक ही तत्व में रखें। जैसा कि आप कहते हैं, बदसूरत।

Answer 2

मेरा उत्तर टिम के एक जैसा होगा, जो व्यापक है।

AFAIK फेसबुक संपादन योग्य सामग्री का उपयोग नहीं करता है। स्थिति बॉक्स एक साधारण textarea और div परत से बना है जिस पर वे निक्स के लिए नीले रंग के rects प्रस्तुत करते हैं।

हालांकि, अगर उन्होंने ऐसा किया, तो यह एक अलग मामला होगा, क्योंकि निक इनलाइन तत्व होगा और सौभाग्य से इनलाइन तत्वों की स्थिति के साथ स्थिति आसान है :)।

अपर्याप्त स्थानों पर पोजिशनिंग कैरेट के संबंध में - सीकेएडिटर में हमें एक ही समस्या थी। ऐसे कई स्थान हैं जहां उपयोगकर्ता देखभाल नहीं कर सकता है। हमने Magic-line नामक प्लगइन के साथ इस समस्या को हल करने का निर्णय लिया। जैसा कि आप डेमो में देख सकते हैं, हमने चयन के साथ समस्या को पूरी तरह से छोड़ दिया और मुझे लगता है कि इस मुद्दे को हल करने का यह सबसे अच्छा तरीका है। यह बहुत उपयोगी है और सीकेडिटर 4.0.1 में यह (और पहले से ही master पर है) कीस्ट्रोक द्वारा पूरी तरह से सुलभ भी होगा।

Answer 3

एक और चीज जो आप कर सकते हैं उत्परिवर्तन पकड़ने के लिए एक उत्परिवर्तन पर्यवेक्षक का उपयोग करें और फिर तथ्य के बाद उन्हें ठीक करें। मेरे उपयोग के मामले में मैं भाग्यशाली था कि प्रत्येक तत्व ने पूर्वनिर्धारित पाठ किया था। जब उत्परिवर्तन पर्यवेक्षक आग लगती है, तो मैंने तत्व को पहले या उसके बाद उचित रूप से परिवर्तित टेक्स्ट को नए टेक्स्ट नोड में स्थानांतरित कर दिया। यह अन्य विकल्पों की तुलना में बहुत आसान लगता है क्योंकि पर्यवेक्षक चरित्र डेटा में सभी परिवर्तनों के लिए आग लगता है, और इसमें सभी बदलावों का उचित रिकॉर्ड भी है, जैसा कि कुंजीपटल ईवेंट कहने के विपरीत है।