पब्लिश किया गया: 20 मार्च, 2025
जब आपको उपयोगकर्ता को साफ़ तौर पर जानकारी डालने की अनुमति देनी हो, तो आपका पहला इंस्टींट <textarea> का इस्तेमाल करना हो सकता है. यह कई मामलों में काम करता है. साथ ही, इसे फ़ॉर्म के साथ काम करने के लिए, किसी खास कोशिश की ज़रूरत नहीं होती. हालांकि, इसकी कुछ सीमाएं भी हैं.
उदाहरण के लिए, हैक का इस्तेमाल किए बिना, कॉन्टेंट के साथ <textarea> को डाइनैमिक तौर पर बढ़ाना. field-sizing: content है, लेकिन यह कुछ ब्राउज़र पर ही काम करता है. ऐसे में, contenteditable="plaintext-only" एट्रिब्यूट वैल्यू का कॉम्बिनेशन काम आता है. इसे <div> जैसे सामान्य एलिमेंट में जोड़ा जा सकता है. इससे, एलिमेंट का साइज़ अपने-आप बदल जाएगा.
स्टाइल करने की सुविधा भी उपलब्ध नहीं है. CSS कस्टम हाइलाइट एपीआई, किसी दस्तावेज़ में टेक्स्ट की किसी भी रेंज को स्टाइल करने की सुविधा देता है. इसके लिए, रेंज बनाने के लिए JavaScript और उन्हें स्टाइल करने के लिए सीएसएस का इस्तेमाल किया जाता है. <textarea>, यूज़र एजेंट के शैडो रूट में <div> का इस्तेमाल करता है. इसलिए, CSS कस्टम हाइलाइट एपीआई की मदद से टेक्स्ट को स्टाइल नहीं किया जा सकता. अगर सीएसएस कस्टम हाइलाइट एपीआई का इस्तेमाल सीधे तौर पर <div> जैसे किसी एलिमेंट पर किया जाता है जिसे आपने contenteditable बनाया है, तो यह ठीक से काम करता है.
<style>
::highlight(highlight) {
background-color: yellow;
color: black;
}
</style>
<div contenteditable="plaintext-only">Edit me</div>
<script>
const parentNode = document.querySelector('div').firstChild;
const range = new Range();
range.setStart(parentNode, 0);
range.setEnd(parentNode, 3);
const highlight = new Highlight(range);
CSS.highlights.set('highlight', highlight);
</script>
यहां डेमो का स्क्रीनशॉट दिया गया है, जिसमें यह सीमा दिख रही है. ध्यान दें कि <textarea> एलिमेंट में टेक्स्ट को स्टाइल नहीं किया गया है, लेकिन दो contenteditable सामान्य <div> एलिमेंट में टेक्स्ट को स्टाइल किया गया है.
