2011-08-05 14 views
20

मैं कुछ चीजों को टाइप करने में उपयोगकर्ता की सहायता के लिए <textarea> में एक ड्रॉपडाउन सूची प्रदर्शित करना चाहता हूं। आप कोड आईडी पूर्ण होने के रूप में वर्तमान आईडीई से यह जानते हैं। जैसे ही आप कुछ लिखना शुरू करते हैं, एक पॉपअप वर्तमान कर्सर/कैरेट स्थान पर दिखाई देगा और आप अपने टेक्स्ट इनपुट को पूरा करने के लिए तीर कुंजियों का उपयोग करके इसे नेविगेट कर सकते हैं।मैं HTML टेक्स्टरेरा में कर्सर स्थान (एक्स/वाई, लाइन/कॉलम नहीं) कैसे ढूंढ सकता हूं?

मैं पाठ स्ट्रिंग में how to get the cursor position पता (यानी कर्सर की स्थिति के चरित्र इंडेक्स), लेकिन मैं इतना है कि <textarea> तत्व के अंदर कर्सर की एक्स/Y निर्देशांक (offsetWidth और offsetHeight की तरह कुछ) प्राप्त करने के लिए पता नहीं कैसे मैं वहां अपनी सूची तत्व स्थापित कर सकता हूं। क्या यह एचटीएमएल/जावास्क्रिप्ट में संभव है, और यह कैसे काम करेगा? आप कैरट की स्थिति में एक खाली अवधि तत्व सम्मिलित और उस तत्व की स्थिति को अपने लटकती प्रदर्शित करने के लिए मिल सकता है:

+2

+ 1 यह एक बहुत अच्छा सवाल है! – Ben

+3

यदि आप वर्णों की संख्या और बॉक्स की चौड़ाई को जानते हैं, तो क्या आप औसत वर्ण चौड़ाई/रेखा ऊंचाई के आधार पर स्थिति का अनुमान लगा सकते हैं? –

+0

मैंने प्रस्तावित अन्य प्रश्न पढ़ा है, लेकिन मैं इस समस्या का समाधान करने का उत्तर नहीं मानता। साथ ही, यह 3 साल का है और ब्राउज़र और मानकों ने इस बीच उन्नत किया है। मुझे काम करने के लिए एक मौजूदा ब्राउज़र की आवश्यकता से डर नहीं है। – ygoe

उत्तर

2
एक संपादन योग्य एचटीएमएल इनपुट ( jsfiddle एक iframe में CKeditor या Rich Text Editor या और भी बेहतर की तरह) के साथ

यह जटिल प्रतीत हो सकता है लेकिन मैं ऐसा करने के किसी अन्य तरीके से नहीं सोच सकता। आप रंग-कोड jsfiddle की तरह पाठ और प्रारूप कोड करता सका

यह है, जब एक कोड संपादक के लिए इस्तेमाल के लिए कुछ अतिरिक्त संभावनाएं है, और शायद कीवर्ड आदि के लिए: पूर्ण कोड-ऑटो किसी तरह का निर्माण

+1

अतिरिक्त संभावनाएं अच्छी लगती हैं, जैसे आपका दिलचस्प सुझाव। लेकिन मैं यह सुनिश्चित करना चाहता हूं कि उपयोगकर्ता स्वरूपित पाठ (जैसे एमएस वर्ड या अन्य वेब पृष्ठों से कॉपी करते समय) दर्ज नहीं कर सकता है और सभी चिपकाए गए पाठ को सादे पाठ की तरह दिखने के लिए दोबारा सुधारित किया गया है और इसे इस तरह परिवर्तित किया जा सकता है। – ygoe

+0

यह संभव है, jsfiddle.net बस यही करता है। वे वास्तव में यह कैसे करते हैं मुझे नहीं पता। एक पल के लिए उस साइट पर कोडिंग और चिपकाने का प्रयास करें, यह आपको कुछ विचार दे सकता है। (एफएफ ctrl + v में काम नहीं करता है, लेकिन "दायाँ क्लिक - पेस्ट" करता है) – Willem

+0

सीकेडिटर को ओपन-सोर्स के रूप में डाउनलोड और इस्तेमाल किया जा सकता है, लेकिन jsfiddle केवल एक वेब एप्लिकेशन प्रतीत होता है, कोई डाउनलोड नहीं, कोई तकनीकी अंतर्दृष्टि नहीं। क्या आप जानते हैं कि उन्होंने अपनी सामग्री कैसे की? – ygoe

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