Textarea में पाठ का चयन व्यवस्थित करें

शुभ दोपहर

इंटरफेस के विकास में, कभी-कभी कुछ शर्तों के आधार पर उपयोगकर्ता-दर्ज किए गए पाठ को उजागर करने के कार्य का सामना कर सकता है। (उदाहरण के लिए, सर्वर-साइड व्याकरण जांच को लागू किया गया था, या एक विशिष्ट रंग के साथ कुछ शब्दों / वर्गों आदि को उजागर करना आवश्यक है)
हालाँकि, textarea तत्व html \ bb टैग का समर्थन नहीं करता है। समाधान में से एक के रूप में, दिव्य तत्वों में सामग्री का उपयोग करें।
इस छोटे से लेख में, मैं टेक्स्टारिया का उपयोग करके पाठ को हाइलाइट किए जाने के तरीके पर अधिक या कम विस्तृत नज़र रखने का प्रस्ताव करता हूं।

समाधान का सामान्य विचार

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

हम समाधान का विश्लेषण करते हैं

मुख्य कार्य के लिए हम एक ऐसा वर्ग बनाते हैं जो इनपुट के रूप में लक्ष्य नोड (टेक्सारिया) के मूल्यों को प्राप्त करता है, फ़ंक्शंस - चयन और फ़ॉन्ट मूल्य (सीएसएस फ़ॉन्ट गुण) के लिए जाँच करना
क्लास कंस्ट्रक्टर को आवश्यक प्री एलीमेंट को दस्तावेज़ के DOM मॉडल में जोड़ना चाहिए, उसे पोज़िशन करना चाहिए और इवेंट्स हैंग करना चाहिए। यहां आप सीएसएस गुणों की स्थापना जोड़ सकते हैं।

/** *   "" textarea * @name TextareaExtension * @param target -   textarea * @param processor -       * @param font -  */ function TextareaExtension(target , processor, font) { var setStyleOptions = function() { //  (    ),   DOM,  font preItem.className = "text-area-selection"; target.parentNode.appendChild(preItem); target.style.font = preItem.style.font = font || "14px Ariel"; // , ,     target.style.width = preItem.style.width = target.offsetWidth + "px"; target.style.height = preItem.style.height = target.offsetHeight + "px"; preItem.style.top = target.offsetTop + "px"; preItem.style.left = target.offsetLeft + "px"; target.style.background = "transparent"; target.style.overflow = "scroll"; //  pre  margin   = 1em 0px.   . //( ,  span  pre   ) preItem.style.margin = "0px 0px"; } setStyleOptions(); //  if (target.addEventListener) { //     textarea target.addEventListener("change", this.analyse, false); target.addEventListener("keyup", this.analyse, false); //     -    textarea  pre target.addEventListener("scroll", this.scrollSync, false); //    resize target.addEventListener("mousemove", this.resize, false); } else if (target.attachEvent) { target.attachEvent("onchange", this.analyse); target.attachEvent("onkeyup", this.analyse); target.attachEvent("onscroll", this.scrollSync); target.attachEvent("mousemove", this.resize); } } 

तो, वर्ग रूपरेखा बनाई जाती है। कक्षा के शेष तरीकों को परिभाषित करें:

  this.scrollSync = function () { preItem.scrollTop = target.scrollTop; }; this.resize = function () { preItem.style.width = target.style.width; preItem.style.height = target.style.height; preItem.style.top = target.offsetTop + "px"; preItem.style.left = target.offsetLeft + "px"; }; this.analyse = function (){ var text = target.value; var words = text.split(/[\s]/); var textPosition = 0; var result = ""; for (var i in words) { if (processor(words[i])) { var textIndex; if (text.indexOf) { textIndex = text.indexOf(words[i]); } else textIndex = findText(text, words[i]); result += text.substr(0, textIndex) + "<span class='text-color-bordered text-checker'>" + words[i] + "</span>"; text = text.substr(textIndex + words[i].length, text.length); } } result += text; preItem.innerHTML = result; }; 

विश्लेषण विधि प्रत्येक शब्द पर निर्भर करती है, इसे एक पूर्वनिर्धारित समारोह में भेजती है। यदि शब्द को हाइलाइट किया जाना चाहिए, तो विधि पिछली सामग्रियों को पूर्व में कॉपी करती है और एक वर्ग के साथ स्पैन में आवश्यक शब्द को "रैप" करती है जो चयन विधि को निर्धारित करती है (इस उदाहरण में, नीचे डॉट अंडरलाइन)
IndexOf फ़ंक्शन का समर्थन नहीं करने वाले ब्राउज़र के लिए, हम एक प्रत्यक्ष खोज विधि को परिभाषित करते हैं - findText (हम इसमें सरणियों के माध्यम से एक सीधा पास लागू करते हैं)

सीएसएस गुण

यहाँ विशिष्ट गुणों की एक सूची दी गई है, और फिर हम उनका विश्लेषण करेंगे:

 .text-area-selection { position:absolute; padding:2px; z-index:-1; display:block; word-wrap:break-word; white-space:pre-wrap; color:white; overflow:scroll; } .text-color-bordered { border-bottom:1px dotted red; } 

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

परिणामस्वरूप, हमें अपने फ़ंक्शन के परिणाम के आधार पर पाठ चयन मिलता है:


सूत्रों का कहना है:
गिटहब लिंक
CodePen

विस्तार

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