क्या PHP या जावास्क्रिप्ट का उपयोग किए बिना अपनी सामग्री को फिट करने के लिए एक textarea प्राप्त करने का एक तरीका है?

97

मैं संपादन के लिए उपयोगकर्ता के लिए सामग्री के साथ एक textarea भर रहा हूं।

क्या सीएसएस के साथ सामग्री को फिट करना संभव है (जैसे overflow:showडिव के लिए)?

html css

— महत्व
स्रोत

1

क्या किसी के पास ऐसा कोई उत्तर नहीं है, जिसमें ऐसा कोई बग न हो जो फ्रेमवर्क का उपयोग नहीं करता हो? :-(

— स्टारबैम्रेनबोलाब्स

मैं बस सीएसएस अधिकतम-चौड़ाई का उपयोग करता हूं: 100% और यह स्वचालित रूप से एक बॉक्स फिट बैठता है। उस के साथ कोई समस्या?

— यशस्वी

यहां एक आधुनिक समाधान (जेएस की एक पंक्ति और कुछ सीएसएस विज़ार्ड का उपयोग करता है): कोडपेन ।

— ओलिवर

42

ज़रुरी नहीं। यह सामान्य रूप से जावास्क्रिप्ट का उपयोग करके किया जाता है।

यहाँ ऐसा करने के तरीकों की एक अच्छी चर्चा है ...

प्रोटोटाइप का उपयोग करके आटोमाइज़िंग टेक्सारिया

— रिक हेवुड
स्रोत

219

केवल एक लाइन

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

— मार्टिन प्रस्टोन
स्रोत

8

इसके केवल दो वोट कैसे होते हैं। यह अविश्वसनीय मार्टिन है। मैं इसे हल करने की कोशिश में सिर्फ 30 मिनट लगाता हूं। अच्छा कार्य।

— फिलिप डफनी

31

यह भी खूब रही। मैं बस इतना जोड़ना चाहूंगा कि टेक्स्टारिया को बड़ा करने के लिए इसे बदलने this.scrollHeight + "px"से this.scrollHeight + 3 + "px"स्क्रॉलबार नहीं दिखा।

— मार्टन

समस्या: जब उपयोगकर्ता स्क्रॉल करने के लिए पर्याप्त लिखता है, तो वह स्क्रॉल स्थिति को हर बार दर्ज करने के साथ नई पंक्ति को रीसेट करता है।

— कोस्टा

5

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मेरे पास एक एडिट पेज पर एक टेक्स्टारिया है, और इसका पहले से ही एक मूल्य है जब पेज लोड होता है, तो मैं इसे कैसे फिट करने के लिए विस्तार कर सकता हूं?

— एरोटिन अग्रहारायन

1

@ArootinAghazaryan - आपने पहले से ही एक समाधान निकाल लिया है, लेकिन किसी और के लिए: बस HTML में इनलाइन होने के बजाय आकार कोड के साथ एक फ़ंक्शन बनाएं। फिर आप पेज लोड पर उसी फ़ंक्शन को कॉल कर सकते हैं।

— मैग्नस एरिकसन

6

यहां एक फ़ंक्शन है जो jQuery के साथ काम करता है (केवल ऊंचाई के लिए, चौड़ाई नहीं):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

नोट: ऑप ने एक समाधान के लिए कहा जो जावास्क्रिप्ट का उपयोग नहीं करता है, हालांकि यह कई लोगों के लिए उपयोगी होना चाहिए जो इस प्रश्न के पार आते हैं।

— क्रिस डुट्रो
स्रोत

5

यह एक बहुत ही सरल उपाय है, लेकिन यह मेरे लिए काम करता है:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

स्निपेट का विस्तार करें

— NICB
स्रोत

2

बॉक्स की ऊंचाई हर कुंजी स्ट्रोक के साथ बढ़ती है , न केवल नई लाइनें। यहां तक कि बैकस्पेस और डिलीट की वजह से हाइट बढ़ने लगती है। ठीक करें, और आपको अपवोट वापस मिल जाएगा।

— बिरेल

IE जैसे कुछ ब्राउज़र स्क्रॉलहाइट की सही गणना नहीं करते हैं, जो उन प्रकार के मुद्दों का कारण बन सकता है। क्रोम में भी मेरे लिए ऐसा कभी नहीं हुआ ...

— KthProg

1

यहां समाधान (कतार को पूरा करना है):

<style>   textarea {     resize: none;     overflow: auto;   } </style>  <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea>  <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){     this.style.height = '1px';     this.style.height = this.scrollHeight + 'px'; } </script>

मूल रूप से आपको इसकी ऊंचाई 1px निर्धारित करनी होगी, इस कारण से: stackoverflow.com/questions/10722058/…

— KthProg

3

डायनेमिक टेक्सारिया नियंत्रण के लिए एक और सरल उपाय।

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

स्निपेट का विस्तार करें

— कृतिका पटेल
स्रोत