पाठ इनपुट फ़ील्ड को गतिशील रूप से बदलना। क्या यह संभव है?

उद्देश्य:

फ़ॉर्म पर टिप्पणियों (textarea) के लिए एक इनपुट फ़ील्ड बनाएं ताकि पाठ की संख्या (रेखाओं) के अनुसार इसका आकार (ऊँचाई) बदल जाए।

उपयोगकर्ता एक पंक्ति में दो शब्दों को दर्ज कर सकता है या एक्सेल से बीस फीट ऊंची एक प्लेट डाल सकता है - इनपुट फ़ील्ड को स्वचालित रूप से बढ़ाना / घटाना चाहिए।

लाइनों की लंबाई अलग है (आकार रबर है और ब्राउज़र विंडो के आकार पर निर्भर करता है), लाइनों को \ r \ n दोनों में लपेटा जा सकता है और बस अगर वे चौड़ाई में फिट नहीं होते हैं।

सिद्धांत रूप में, आपको textarea की पंक्तियों की विशेषता को बदलने के लिए पाठ की पंक्तियों की संख्या की गणना करने के लिए एक सूत्र की आवश्यकता होती है।



जावास्क्रिप्ट का स्वागत है। यदि समाधान केवल html / css के साथ संभव है, तो और भी बेहतर।



समाधान:

IE के लिए, एक शानदार समाधान kosiasik द्वारा सुझाया गया है :

Textarea शैली में, अतिप्रवाह लिखें: दृश्यमान

एक सार्वभौमिक समाधान drJonnie का सुझाव दिया:

textarea पिक्सल में ऊँचाई सेट करता है और किसी भी कुंजी (माउस सहित) को दबाने पर एक ईवेंट को लटका देता है। यह घटना हर बार स्क्रॉलहाइट और क्लाइंटहाइट की तुलना करती है, यदि पहला बड़ा है, तो टेक्सटारिया की ऊंचाई अपडेट की जाती है।

मैंने इस समाधान को लगभग लागू कर दिया है:

  फ़ंक्शन समायोजनहाइट (textarea) {
     var dif = textarea.scrollHeight - textarea.clientHeight
     अगर (अंतर) {
         अगर (isNaN (parseInt (textarea.style.height))) {
             textarea.style.height = textarea.scrollHeight + "px"
         } {
             textarea.style.height = parseInt (textarea.style.height) + dif + px8
         }
     }
 } 

यह पसंद के आधार पर onFocus, onBlur, onKeyPress, आदि की घटनाओं पर लटका रहता है

drJonnie ने टिप्पणी में अपने निर्णय का उल्लेख किया

lahmatiy jQuery ( उपयोग उदाहरण ) का उपयोग करके एक समाधान लाया , लेकिन मैं एक फ़ंक्शन के लिए पूरे ढांचे को कनेक्ट नहीं करना चाहता था

मैं चर्चा में सभी प्रतिभागियों का धन्यवाद करता हूं।