फ़ाइल

Question

से पाठ पढ़ने पर बल पुनर्वितरण, डुप्लिकेट सुझाव है जहां मुझे इस प्रश्न का आधार मिला, इसलिए यह डुप्लिकेट नहीं है! तथ्य की बात के रूप में, मैं पहले से ही शुरू से ही उस सवाल से जुड़ा हुआ है ...

---

अच्छा संपादित करें:

मैं एक JSFiddle (मेरी पहली बार :)) बनाया है। ध्यान दें कि पाठ की इच्छा कैसे विस्तारित नहीं होती है। टेक्स्टरेरा के अंदर कुछ टाइप करें और इसे तुरंत बदल दिया जाएगा।

यदि हम स्वचालित रूप से एक कुंजीपटल ईवेंट भेज सकते हैं, तो यह काम कर सकता है ... (this प्रासंगिक प्रश्न मदद नहीं करता है, उत्तरों का कोई प्रभाव नहीं पड़ा)।

---

मैं textarea उपयोग कर रहा हूँ के रूप में here से है। फिर, मैंने एक फाइल से पढ़ा और मैं सामग्री को टेक्स्टबॉक्स में डाल रहा हूं, लेकिन इसका आकार बदलना नहीं चाहिए जैसा कि इसे करना चाहिए।

function updateTextbox(text) { 
    $('#cagetextbox').val(text); 
}; 

कोई भी विचार:

मैं इस तरह पाठ बॉक्स को अद्यतन?

मैं उबंटू 12.04 में फ़ायरफ़ॉक्स 34.0 कैननिकल पर हूं, अगर यह कुछ भूमिका निभाता है, जो मुझे उम्मीद है कि यह मामला नहीं है, क्योंकि मेरे कुछ उपयोगकर्ता क्रोम का उपयोग करते हैं।

---

संपादित करें:

का प्रयास कुछ इस तरह लिखने के लिए होगा:

$('#cagetextbox').attr("rows", how many rows does the new text contain); 

ध्यान दें कि अगर हम find out how many lines of text the textarea शामिल करने की कोशिश है, हम एक जवाब के रूप में 1 मिल जाएगा।

---

EDIT_2

शायद width/(length_of_line * font_size) की तरह कुछ। कुछ परीक्षणों के लिए, यह सही लगता है, अगर मैंने 1 घटाया (केवल पाठ्यक्रम के परिणाम का पूर्णांक हिस्सा रखते हुए)।

this.baseScrollHeight 

यह केवल एक पाठ क्षेत्र पर 'फोकस' के बाद निर्धारित किया है:

Answer 1

आपका पाठ क्षेत्र ऊंचाई खुद भी जब आप उस पर 'input.textarea' को गति प्रदान क्योंकि यह मान अपरिभाषित है अद्यतन नहीं किया।

मैं अपने कोड एक छोटा सा बदलाव कर दिया है: 'इनपुट'

$(document).on('input.textarea', '.autoExpand', function(){ 
     var minRows = this.getAttribute('data-min-rows')|0, 
      rows; 
     this.rows = minRows; 
     this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this); 
     rows = Math.ceil((this.scrollHeight - this.baseScrollHeight)/16); 
     this.rows = minRows + rows; 
    }); 

पर http://jsfiddle.net/n1c41ejb/4/

तो, और एक अलग कार्य करने के लिए baseScrollHeight गणना के लिए कदम

function calcBaseScrollHeight(textArea) { 
    var savedValue = textArea.value, 
     baseScrollHeight; 
    textArea.value = ''; 
    baseScrollHeight = textArea.scrollHeight; 
    textArea.value = savedValue; 
    return baseScrollHeight; 
} 

तो फोन अपने अद्यतन टेक्स्टबॉक्स इस तरह:

$('#cagetextbox').val(text).trigger('input.textarea'); 

Answer 2

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

function autoheight(a) { 
    if (!$(a).prop('scrollTop')) { 
     do { 
      var b = $(a).prop('scrollHeight'); 
      var h = $(a).height(); 
      $(a).height(h - 5); 
     } 
     while (b && (b != $(a).prop('scrollHeight'))); 
    }; 
    $(a).height($(a).prop('scrollHeight')); 
} 

आप की तरह किसी भी घटनाओं पर

आकार।

$("#cagetextbox").on("keyup change", function (e) { 
    autoheight(this); 
}); 

और/या जब ईवेंट ट्रिगर नहीं होते हैं तो स्वचालित रूप से इसे स्वयं कॉल करें।

function updateTextbox(text) { 
    $('#cagetextbox').val(text); 
    autoheight($("#cagetextbox")); 
}; 

Fiddle

Answer 3

मैं एक काम बेला बनाया। यह एक इनपुट टेक्स्टफील्ड बनाता है जैसे कि यह गैर संपादन योग्य div में प्रदर्शित किया गया था।

https://jsfiddle.net/khgk7nt5/2/

उदाहरण सीएसएस

.test{ 
    font-family:"Times New Roman", Times, serif; 
    font-color:#CCCCCC; 
    font-size:20px; 
    width:300px; 
} 
.testLoc{ 
    position:absolute; 
    top:-1000px; 
} 

जावास्क्रिप्ट

var testText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore" 

var test = $("<div/>"); 
test.addClass("test testLoc"); 
test.text(testText); 
$("body").append(test); 

var out = $("<textarea/>"); 
out.addClass("test"); 
out.width(test.width()); 
out.height(test.height()); 
out.val(testText); 
$("body").append(out); 
test.remove();