ऑटो-आकार के साथ एक textarea बनाना

366

इस बारे में एक और सूत्र था , जिसे मैंने आजमाया है। लेकिन एक समस्या है: textareaयदि आप सामग्री को हटाते हैं तो सिकुड़ता नहीं है। मुझे इसे सही आकार में सिकोड़ने का कोई तरीका नहीं मिल रहा है - यह clientHeightमान पूर्ण आकार के रूप में वापस आता है textarea, इसकी सामग्री नहीं।

उस पृष्ठ का कोड नीचे है:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}
javascript  html  resize  height  textarea 
— DisgruntledGoat
स्रोत
आपके द्वारा जुड़े धागे के लिए स्वीकृत उत्तर मेरे लिए काम करता है। लाइन ब्रेक जोड़ने से टेक्सटेरिया का विस्तार होता है और उन्हें हटाकर टेक्स्ट क्षेत्र सिकुड़ जाता है। आप कौन सा ब्राउज़र उपयोग कर रहे हैं?
— लुप्तप्राय
3
मेरा कार्य त्रुटि करता है। लाइन के अंत में नई लाइन टाइप करना आवश्यक है। यह बेहतर उपाय है। james.padolsey.com/javascript/jquery-plugin-autoresize
आप इसके लिए मेरा प्लगइन आज़मा सकते हैं: github.com/AndrewDryga/jQuery.Textarea.Autoresize
— एंड्रयू ड्राईगा
— Ciro Santilli 冠状 izing izing izing at at
मैंने इसके लिए एक पैकेज बनाया है यदि आप प्रतिक्रिया का उपयोग कर रहे हैं: npmjs.com/package/react-fluid-textarea
— मार्टिन डॉसन

जवाबों:

230

यह मेरे लिए काम करता है (फ़ायरफ़ॉक्स 3.6 / 4.0 और क्रोम 10/11):

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
स्निपेट का विस्तार करें

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

— Panzi
स्रोत
13
ऐसा होता है! फिर के लिए एक jsfiddle बनाया: jsfiddle.net/CbqFv यह अब क्रोम, फ़ायरफ़ॉक्स और IE8 में काम करता है - हालांकि यह IE8 में थोड़ा गड़बड़ है। जैसे-जैसे आप लाइनों की संख्या बढ़ाते या घटाते हैं, यह थोड़ा कम हो जाता है। जैसा कि आपने jQuery के ऑटोरेस्पोर्टर प्लगइन में देखा होगा, वे चारों ओर काम करते हैं, जो टेक्स्टारिया को क्लोन करके, इसकी ऊंचाई को मूल के बजाय ऑटो पर सेट करते हैं, फिर मूल पर स्क्रॉलहाइट सेट करने के लिए इसका उपयोग करते हैं। मैंने ऐसा किया है कि इस अद्यतन फ़िडेल में: jsfiddle.net/CbqFv/2 यह IE मुद्दे को हल करता है लेकिन फ़ायरफ़ॉक्स काम करना बंद कर देता है।
— क्रिस मोसचिनी 18
3
@ हेलनेली: फिर एक आईडी का उपयोग न करें। जैसे कि एक वर्ग का उपयोग करें और उस वर्ग के सभी तत्वों के लिए क्या करें। यह एक शुरुआती कार्य होना चाहिए।
— पंजाबी
3
@ DenilsonSá यदि कोई केवल यह मान सकता है कि केवल आधुनिक ब्राउज़र का उपयोग किया जाता है तो वेब एक बेहतर स्थान होगा।
— पणजी
2
यह अच्छी तरह से काम नहीं करेगा अगर IE11 में एक स्क्रॉलबार एन्वोल किया जाता है। यदि आप इस fiddle jsfiddle.net/CbqFv का उपयोग करते हैं और जब तक आपको स्क्रॉलबार नहीं मिल जाता है, तब तक लाइनें दर्ज करें। कोई विचार?
— कलजक
6
यह पूरी तरह से टूट जाता है अगर टेक्सारिया नीचे पृष्ठ के अंत के पास है - सब कुछ वापस कूदता है और इसके कारण आगे होता है style.height='auto'। मुझे संदेह है कि समाधान केवल माप के लिए उपयोग किए गए छिपे हुए सिबलिंग को जोड़ना है।
— rr-
372

एक पूरा मामला सरल समाधान

अपडेट किया गया 2020-05-14 (मोबाइल और टैबलेट के लिए बेहतर ब्राउज़र समर्थन)

निम्नलिखित कोड काम करेगा:

  • प्रमुख इनपुट पर
  • पेस्ट किए गए टेक्स्ट के साथ (राइट क्लिक और ctrl + v)।
  • कट टेक्स्ट (राइट क्लिक और ctrl + x) के साथ।
  • प्री-लोडेड टेक्स्ट के साथ।
  • सभी textarea के साथ (बहुस्तरीय टेक्स्टबॉक्स की) साइट विस्तृत है।
  • साथ फ़ायरफ़ॉक्स (v31-67 परीक्षण किया)।
  • क्रोम के साथ (v37-74 परीक्षण किया गया)।
  • साथ आईई (v9-v11 परीक्षण किया)।
  • साथ एज (v14-v18 परीक्षण किया)।
  • IOS सफारी के साथ ।
  • Android ब्राउज़र के साथ ।
  • जावास्क्रिप्ट सख्त मोड के साथ ।
  • है W3C सत्यापित किया गया।
  • और सुव्यवस्थित और कुशल है।

विकल्प 1 (jQuery के साथ)

इस विकल्प के लिए jQuery की आवश्यकता है और इसका परीक्षण किया गया है और यह 1.7.2 - 3.3.1 के साथ काम कर रहा है

सरल (अपनी मास्टर स्क्रिप्ट फ़ाइल में यह jquery कोड जोड़ें और इसके बारे में भूल जाएं।)

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
स्निपेट का विस्तार करें

Test on jsfiddle

विकल्प 2 (शुद्ध जावास्क्रिप्ट)

सरल (इस जावास्क्रिप्ट को अपनी मास्टर स्क्रिप्ट फ़ाइल में जोड़ें और इसके बारे में भूल जाएं।)

const tx = document.getElementsByTagName('textarea');
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
स्निपेट का विस्तार करें

Test on jsfiddle

विकल्प 3 (jQuery एक्सटेंशन)

उपयोगी है यदि आप आगे के पाठ को लागू करना चाहते हैं, तो आप ऑटो-साइज़ बनना चाहते हैं। 

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

के साथ आह्वान किया $('textarea').autoHeight()

UPDATING TEXTAREA VIA JAVASCRIPT

जावास्क्रिप्ट के माध्यम से एक textarea में सामग्री इंजेक्षन जब विकल्प 1 में समारोह आह्वान करने के लिए निम्नलिखित कोड जोड़ें।

$('textarea').trigger('input');

PRESET कपड़ा पाठ ऊँचाई

Textarea की प्रारंभिक ऊंचाई तय करने के लिए आपको एक अतिरिक्त शर्त जोड़ना होगी:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
स्निपेट का विस्तार करें

— DreamTeK
स्रोत
12
यह एक महान समाधान है, यह थोड़ा और अधिक समझने योग्य होगा यदि विधि का नाम और पैरामीटर का नाम व्यक्तिगत अक्षरों के बजाय सही नामों से अपडेट किया गया था।
— बजे क्रिस मैरिसिक
5
@Obsidian धन्यवाद! मुझे पता चला कि मुझे हमेशा 0 ही क्यों मिलता है — मैंने एक बूटस्ट्रैप मोडल में टेक्सटेरिया रखा है! जैसा कि मोडल पहले से छिपा हुआ है, इसमें textarea में 0 स्क्रॉलहाइट 😂😂 होगा
— WTIFS
7
@Obsidian शानदार !! (विकल्प 3)। this.style.height = 'auto';जादू व्यवहार ठीक है। मैं बहुत निराश था कि स्क्रॉलहाइट व्यवहार में इतना अजीब क्यों था। ऑटो की ऊँचाई, फिर उसी रेंडर चक्र में स्क्रॉलहाइट का मिलान करना अभी भी मेरे दिमाग को उड़ा रहा है कि यह इस समस्या को कैसे 'ठीक करता है' हालांकि यह केवल तकनीकी रूप से दूसरी ऊंचाई को चित्रित करना चाहिए।
— कम से कम
2
मैंने आज क्रोम में विकल्प 3 की कोशिश की और एक जोड़ी को ट्विस्ट करना पड़ा। 1) यह हमेशा सही ढंग से आकार नहीं देगा यदि आपके पास बनावट पर "ऊंचाई" या "सभी" संक्रमण है। मेरा सुझाव है कि ऊंचाई को प्रभावित करने वाले संक्रमणों का उपयोग न करें। 2) स्क्रॉलहाइट ऊंचाई के लायक दो पंक्तियों का एक मिनीमम लौटा रहा था (शायद इसलिए कि क्रोम में टेक्स्टारिस के लिए डिफ़ॉल्ट है) लेकिन अगर आप इसे बदलते हैं ।style.height = 'auto'; to this.style.height = '0px'; और प्रारंभिक स्थिति को 0 पर जाने से रोकने के लिए न्यूनतम ऊंचाई जोड़ें, स्क्रॉलहाइट सही ढंग से उपयुक्त होने पर ऊंचाई की एक पंक्ति लौटाएगा।
— ज़ोरोदेलेआरेना
3
@Obsidian क्या आप बता सकते हैं कि this.style.height = 'auto';स्क्रॉलहाइट के व्यवहार को कैसे ठीक करता है? यह सिर्फ जादू है।
— साइडसी
63

jQuery समाधान अपनी आवश्यकताओं से मेल करने के लिए सीएसएस समायोजित करें

सीएसएस ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

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

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

या jQuery 1.7 + के लिए वैकल्पिक ...

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

मैंने आपके प्रयोगों के लिए एक शुरुआती बिंदु के रूप में पूर्ण न्यूनतम स्टाइल के साथ एक फिडेल बनाया है ... http://jsfiddle.net/53eAy/951/

— चीम
स्रोत
5
यह अच्छा है, लेकिन overflow-y: hidden;जब मैं आकार बदलता है तो स्क्रॉल पट्टी को संक्षिप्त रूप से रोकने के लिए मैं सीएसएस में जोड़ दूंगा।
— brettjonesdev
पूरी तरह से निश्चित नहीं है, लेकिन इसके बिना पाठ क्षेत्र बहुत अधिक बढ़ता है। मुझे लगता है कि यह उस तरीके से करना है जो तत्वों को स्क्रॉल किया जाता है।
— चिम
1
परिदृश्य की व्यापक सत्यता के लिए काम करने के लिए कई घटनाओं का उपयोग करें $('textarea.auto-resize').on('change cut paste drop keyup', function(){...})
— रक्सित
1
व्यूपोर्ट की तुलना में टेक्स्ट पर Chrome 40 विन 8.1 में पागल जैसे चारों ओर कूदता है। यह काफी अनुपयोगी है।
— टोबेबीयर
1
स्क्रॉलिंग (न्यूलाइन) रखने से स्क्रॉलिंग में परिणाम होता है। कुंजी जारी होने तक आकार समायोजित नहीं होता है।
— नील्स एबल्डगार्ड
28 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

फ़ायरफ़ॉक्स 14 और क्रोमियम 18 में परीक्षण किया गया। संख्या 24 और 12 मनमानी हैं, यह देखने के लिए कि आपको सबसे अच्छा क्या सूट करता है।

आप शैली और स्क्रिप्ट टैग के बिना कर सकते हैं, लेकिन यह थोड़ा गड़बड़ हो जाता है imho (यह पुरानी शैली HTML + JS है और इसे प्रोत्साहित नहीं किया गया है)।

<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

संपादित करें: आधुनिकीकरण कोड। AddEventListener के लिए परिवर्तित onkeyup विशेषता।
संपादित करें: कीपैड, कीप की तुलना में बेहतर काम करता है
संपादित करें: संपादित करने से पहले फ़ंक्शन की घोषणा
करें: इनपुट कीडाउन से बेहतर काम करता है (thnx @ WASD42 & @ MA-Maddin)

jsfiddle

— GijsjanB
स्रोत
3
इस एक में कुछ कमियां हैं: 1) बनावट को फिर से आकार नहीं दिया जाएगा, तब उपयोगकर्ता केवल अपने माउस बटन के साथ कुछ पेस्ट करेगा; 2) यदि उपयोगकर्ता कीबोर्ड (Ctrl + V) का उपयोग करके कुछ पेस्ट करेगा, तो textarea को केवल तभी बदला जाएगा जब वह Ctrl जारी करेगा। यदि उपयोगकर्ता Ctrl + V को कई बार दबाएगा तो textarea पिछले एक के बाद ही बढ़ेगा। आपको समान फ़ंक्शन को पेस्ट, कट, परिवर्तन और ड्रॉप ईवेंट भी जोड़ना चाहिए।
— WASD42
इसलिए inputइसके बजाय सिर्फ घटना का उपयोग करें । देखें stackoverflow.com/a/14029861/1951524
— मार्टिन श्नाइडर
textareaएक-लाइनर के रूप में कई समर्थन के साथ बेहतर संस्करण :document.querySelectorAll('textarea').forEach(function(te){ te.addEventListener("input", function() { this.style.height='24px'; this.style.height=this.scrollHeight+12+'px'; }); });
— मीस्नर
1
@Meisner यह छोटा है, लेकिन मैं यह नहीं कहूंगा कि यह "बेहतर" है। एक अनाम फ़ंक्शन के साथ, removeEventListenerआपके ईवेंट श्रोताओं को कॉल करने और साफ़ करने का कोई तरीका नहीं है। यह विशेष रूप से महत्वपूर्ण है जब एक फॉरएच लूप में सभी जगह घटना श्रोताओं को बनाया जाए। इसके अलावा, मेरे विचार में, पठनीयता संगति से कहीं अधिक महत्वपूर्ण है।
— गिजजनब
दूसरों के लिए और मुझे भविष्य के लिए, यह सुनिश्चित करें कि box-sizing: border-box;संपत्ति सेट हो गई है या प्रत्येक onInput घटना के लिए textarea 4px से पता चलता है। मैं 3 घंटे की तरह बिताया जब तक मुझे लगा कि यह समस्या थी।
— 19
24

मेरे लिए सबसे अच्छा समाधान (काम करता है और छोटा है):

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    });

यह पेस्ट (माउस के साथ) के साथ बिना पलक झपकाए, काटकर, प्रवेश करके और सही आकार में सिकुड़े बिना आकर्षण की तरह काम करता है।

कृपया jsFiddle पर एक नज़र डालें ।

— vatavale
स्रोत
बहुत खूब !!! एक लाइन सौदा! मूर्खतापूर्ण प्रश्न हो मैं एक एनीमेशन जोड़ सकता हूँ जब यह आकार बदलता है? पाठ बॉक्स की तरह धीरे धीरे आकार बदलने के बजाय फिर आकार?
— user2513846
1
@ user2513846 लगता है कि यह बहु लाइन संपादन के डिजाइन से संभव नहीं है। मैंने textarea साइज़ को एनिमेट करने का एक उदाहरण बनाया: jsfiddle.net/yk2g333e जैसा कि आप जानते हैं कि टेक्स्ट कर्सर लाइन और कैरेट पर नीचे जाता है, इसलिए यदि इस समय कोई ठहराव नहीं है तो चेतन के लिए कुछ भी नहीं है। लेकिन रोकना उपयोगकर्ता के लिए कष्टप्रद होगा।
— वतावले
1
@ user2513846 हालांकि, टेक्सारिया के अंत में एक और खाली रेखा के साथ, चिकनी एनीमेशन होना संभव है: jsfiddle.net/p23erdfr
— vatavale
16

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

सामान्य तौर पर आप शायद प्रपत्र नियंत्रण पर स्क्रॉलहाइट पर निर्भर नहीं होना चाहिए। स्क्रॉलहाइट के अलावा अन्य IE एक्सटेंशन की तुलना में पारंपरिक रूप से कम व्यापक रूप से समर्थित है, HTML / CSS का कहना है कि आंतरिक नियंत्रण को कैसे लागू किया जाता है और इस बारे में आपको कोई गारंटी नहीं है कि स्क्रॉलहाइट कुछ भी सार्थक नहीं होगा। (परंपरागत रूप से कुछ ब्राउज़रों ने कार्य के लिए ओएस विगेट्स का उपयोग किया है, जिससे सीएसएस और डीओएम इंटरेक्शन को उनके आंतरिक पर असंभव बना दिया है।) प्रभाव को सक्षम करने की कोशिश करने से पहले स्क्रॉलहाइट / क्लाइंटहाइट की मौजूदगी के लिए कम से कम सूँघें।

समस्या से बचने के लिए एक और संभावित वैकल्पिक दृष्टिकोण यदि यह महत्वपूर्ण है कि यह अधिक व्यापक रूप से काम करता है तो हो सकता है कि एक छिपे हुए डिवाइडर का उपयोग टेक्स्टरी के समान चौड़ाई में हो, और एक ही फ़ॉन्ट में सेट हो। की-अप पर, आप टेक्स्टवेयर से टेक्स्ट को छिपे हुए डिव में एक टेक्स्ट नोड पर कॉपी करते हैं (याद रखें कि '\ n' को एक लाइन ब्रेक के साथ बदलना है, और यदि आप आंतरिक HTML का उपयोग कर रहे हैं तो '<' / 'और' ठीक से 'बच सकते हैं)। तो बस div के ऑफसेट को मापने से आपको वह ऊंचाई मिलेगी जिसकी आपको ज़रूरत है।

— bobince
स्रोत
1
कौन से ब्राउज़रों को टेक्स्टारिस के लिए समस्याएँ होनी चाहिए scrollHeight? IE, फ़ायरफ़ॉक्स और ओपेरा के मौजूदा संस्करणों के साथ ठीक काम करता है ...
— क्रिस्टोफ़
1
मेरे पास केवल एक ही हाथ है कोनकेर, जो क्लाइंटहाइट को स्क्रॉलहाइट के रूप में लौटाता है। यह एक ऐसा व्यवहार है जिसकी आप उम्मीद कर सकते हैं जब तक कि ब्राउज़र सीएसएस बॉक्स मॉडल को विगेट्स के आंतरिक हिस्से पर लागू नहीं करता है, कुछ ऐसा है जो उन्होंने हमेशा नहीं किया है और मानक यह नहीं कहते हैं कि उन्हें करना है।
— बोबिन्स
14

यदि आपको IE8 का समर्थन करने की आवश्यकता नहीं है, तो आप इस inputघटना का उपयोग कर सकते हैं :

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

अब आपको केवल कुछ सीएसएस जोड़ने की जरूरत है और आप कर रहे हैं:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

उपयोग:

<textarea autoresize>Type here and I’ll resize.</textarea>

आप इस बारे में अधिक पढ़ सकते हैं कि यह मेरे ब्लॉग पोस्ट पर कैसे काम करता है ।

— मैक्सिमिलियन हॉफमैन
स्रोत
1
अच्छा समाधान, लेकिन थोड़ा ठीक करने की जरूरत है। जब textarea की सामग्री को लोड किया जाता है f.ex. डेटाबेस से, textarea छोटे रहते हैं। आपको inputफ़ॉर्च साइकिल में इनिशियलाइज़ेशन के दौरान ईवेंट को ट्रिगर करना होगा।
— अजाक्स
11

ऑटो साइज़

https://github.com/jackmoore/autosize

बस काम करता है, स्टैंडअलोन, लोकप्रिय है (अक्टूबर 2018 के रूप में 3.0k + गिटहब सितारे), सीडीएनजे पर उपलब्ध है ) और हल्के (~ 3.5k )। डेमो:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>
स्निपेट का विस्तार करें

BTW, यदि आप ACE संपादक का उपयोग कर रहे हैं, का उपयोग करें maxLines: Infinity: ऐस क्लाउड 9 संपादक में सामग्री के लिए स्वचालित रूप से ऊंचाई समायोजित करें

— सिरो सेंटिल्ली 郝海东 冠状 郝海东 郝海东 郝海东 郝海东
स्रोत
2
संस्करण 2 फरवरी 2015 में जारी किया गया है। यह सरल हो गया है और अब jQuery पर निर्भर नहीं करता है
— खस्ता
क्षमा करें, यह काम करता है। शायद मैं दूसरे ब्राउज़र में था .. इसलिए, मुझे लगता है कि अगर आप मेरी टिप्पणी को नजरअंदाज करते हैं तो बेहतर है ..
— टोनी मिशेल क्युबेट
@ToniMichelCaubet आह, ठीक है शायद CDN समस्या तब। मुझे जाँचने दो।
— सिरो सेंटिल्ली 郝海东 iro i 法轮功
autosizeप्लगइन मैन्युअल पाठ क्षेत्र में आकार आइकन का उपयोग कर आकार बदलने के लिए अनुमति नहीं है।
— j4v1
7

यहां से एक लाइनर मिला ;

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>
— 17K
स्रोत
6

क्या किसी को संतोषी माना गया है? स्क्रॉलिंग के साथ कोई गड़बड़ नहीं है, केवल एक ही JS मैं इसके बारे में पसंद करता हूं यदि आप धब्बा पर डेटा को बचाने की योजना बनाते हैं ... और जाहिर है, यह सभी लोकप्रिय ब्राउज़रों पर संगत है: http://caniuse.com/#feat = contenteditable

बस इसे एक टेक्स्ट बॉक्स की तरह दिखने के लिए स्टाइल करें, और यह ऑटो करता है ... अपनी न्यूनतम ऊंचाई को पसंदीदा टेक्स्ट ऊंचाई बनाएं और उस पर रखें।

इस दृष्टिकोण के बारे में क्या अच्छा है कि आप कुछ ब्राउज़रों पर सहेज सकते हैं और टैग कर सकते हैं।

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>
— वेबमास्टर जी
स्रोत
Chrome, ENTER पर <div> तत्व जोड़ देगा।
— sbaechler
contenteditableअच्छा है, लेकिन अगर आप सादा चाहते हैं तो इसे -webkit-user-modify: read-write-plaintext-onlyऔर जैसे विकल्पों का एक गुच्छा चाहिए white-space: pre-wrap।
— mik01aj
@_sbaechler: <div> s का उपयोग करते समय छोड़ा जाता है [dom-element].innerText । @WebmasterG IMHO jquery को छोड़ना अच्छा होगा (पारदर्शिता के लिए) और jsfiddle के बजाय रननेबल कोड स्निपेट के माध्यम से इस पृष्ठ पर उदाहरण को शामिल करना।
— अद्रब्रु
4

मैंने कई टेक्स्टारेज़ के लिए निम्न कोड का उपयोग किया है। Chrome 12, फ़ायरफ़ॉक्स 5 और IE 9 में ठीक से काम करना, यहां तक ​​कि टेक्स्टारेज़ में किए गए डिलीट, कट और पेस्ट क्रियाओं के साथ भी।

<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>
<script type='text/javascript'>
function attachAutoResizeEvents()
{   for(i=1;i<=4;i++)
    {   var txtX=document.getElementById('txt'+i)
        var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
        txtX.onchange=new Function("resize(this,"+minH+")")
        txtX.onkeyup=new Function("resize(this,"+minH+")")
        txtX.onchange(txtX,minH)
    }
}
function resize(txtX,minH)
{   txtX.style.height = 'auto' // required when delete, cut or paste is performed
    txtX.style.height = txtX.scrollHeight+'px'
    if(txtX.scrollHeight<=minH)
        txtX.style.height = minH+'px'
}
window.onload=attachAutoResizeEvents
</script>
— निकुंज भट्ट
स्रोत
4

थोड़ा अलग दृष्टिकोण है।

<div style="position: relative">
  <pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

विचार से पाठ की प्रतिलिपि बनाना है textarea हैpre और सीएसएस को सुनिश्चित करना है कि उनका आकार समान है।

लाभ यह है कि किसी भी घटनाओं को छूए बिना पाठ को स्थानांतरित करने के लिए सरल उपकरण मौजूद हैं। अर्थात्, AngularJS में आप एक जोड़ना होगा ng-model="foo" ng-trim="false"करने के लिए textareaऔर ng-bind="foo + '\n'"करने के लिएpre । एक बेला देखें ।

बस यह सुनिश्चित कर लें कि preइसका फ़ॉन्ट आकार समान है textarea।

— करोलिस Juodelė
स्रोत
1
" बस यह सुनिश्चित कर लें किpretextarea " के समान फ़ॉन्ट आकार है "- उन्हें समान होने की आवश्यकता है line-height, paddingऔर / और या समान मात्रा में borderभी। यह कोणीय के लिए सबसे अच्छा समाधान है।
— जेमी बार्कर
4

निम्नलिखित, काटने, चिपकाने आदि के लिए काम करता है, भले ही उन कार्यों को माउस से किया जाए, एक कीबोर्ड शॉर्टकट, एक मेनू बार से एक विकल्प का चयन ... कई जवाब एक समान दृष्टिकोण लेते हैं, लेकिन वे बॉक्स के लिए जिम्मेदार नहीं हैं- आकार देना, यही वजह है कि वे गलत तरीके से शैली को लागू करते हैं overflow: hidden।

मैं निम्नलिखित है, जो भी साथ अच्छी तरह से काम करते हैं max-heightऔर rowsन्यूनतम और अधिकतम ऊँचाई के लिए।

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));
textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}
<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>
स्निपेट का विस्तार करें

पूर्णता के लिए, आपको adjustकुछ और परिस्थितियों में फ़ंक्शन को कॉल करना चाहिए :

  1. विंडो आकार बदलने की घटनाओं, यदि textareaविंडो आकार बदलने के साथ परिवर्तन की चौड़ाई , या पाठारिया की चौड़ाई बदलने वाली अन्य घटनाएं
  2. जब textareaकी displayशैली विशेषता परिवर्तन, जैसे जब यह से चला जाता है none(छुपा) करने के लिएblock
  3. जब textareaप्रोग्राम के मान को बदल दिया जाता है

ध्यान दें कि उपयोग करना window.getComputedStyleया प्राप्त currentStyleकरना कुछ हद तक कम्प्यूटेशनल रूप से महंगा हो सकता है, इसलिए आप इसके बजाय परिणाम को कैश करना चाह सकते हैं।

IE6 के लिए काम करता है, इसलिए मुझे वास्तव में उम्मीद है कि यह पर्याप्त पर्याप्त समर्थन है।

— जोसेफ नेल्स
स्रोत
4

एक अलग दृष्टिकोण के रूप में, आप एक का उपयोग कर सकते हैं <span>जो अपने आकार को स्वचालित रूप से समायोजित करता है। आपको contenteditable="true"संपत्ति जोड़कर इसे संपादन योग्य बनाना होगा और आपका काम पूरा हो जाएगा:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}
<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>
स्निपेट का विस्तार करें

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

— राहिल हिलन
स्रोत
इस पृष्ठ पर पहले से ही सामग्री का उपयोग करने वाला एक उत्तर है: stackoverflow.com/questions/454202/…
— adabru
@adabru हाँ, लेकिन दो उत्तर समान नहीं हैं। टोयोटा लाल कार बनाती है, और फोर्ड लाल कारें भी बनाती है, लेकिन वे अलग हैं, वे नहीं हैं? यदि आप अन्य उत्तर को अधिक पसंद करते हैं, तो इसके साथ जाएं। लेकिन ऐसे लोग हैं जो मेरे जवाब की अधिक सराहना करते हैं और इसके साथ जाते हैं। अलग-अलग विकल्प होना अच्छा है।
— राहिल हिलन
3

थोड़ा सुधार। पूरी तरह से ओपेरा में काम करता है

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });
— artnik-समर्थक
स्रोत
जब तक आपकी लाइनें ओवरफ्लो नहीं होतीं - तब तक वे फिट नहीं होंगे।
— टॉम कफका
बॉक्स से बाहर काम करता है, महान (फ़ायरफ़ॉक्स 72)
— मिकी 4
2

मैं jquery के साथ इसे लागू करने का एक छोटा और सही तरीका जानता हूं। कोई अतिरिक्त छिपी हुई div की जरूरत नहीं है और अधिकांश ब्राउज़र में काम करता है

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>
jQuery का .live()पदावनत कर दिया गया है। api.jquery.com/live आप .on()इसके बजाय आम तौर पर उपयोग करना चाहेंगे ।
— ल्यूक
2

मुझे नहीं पता कि अगर कोई इस तरह का उल्लेख करता है लेकिन कुछ मामलों में पंक्तियों की विशेषता के साथ ऊंचाई का आकार बदलना संभव है

textarea.setAttribute('rows',breaks);

डेमो

— h0mayun
स्रोत
1
जो आपके पास है तो ही काम करता है white-space: nowrap;। जब एक लाइन लाइन-ब्रेक के बिना दूसरी लाइन से लपेटती है, तो टेक्सएरिया को अब ठीक से समायोजित नहीं किया जाएगा।
— यति
2

यहाँ पैन्जी के उत्तर के लिए एक कोणीय निर्देश है।

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>
— chrmcpn
स्रोत
आपको सेटटिमाउट की तुलना में $ समयबाह्य का उपयोग करना चाहिए - यह सुनिश्चित करेगा कि मॉडल आरंभीकृत हो जाता है (मिलीसेकंड निर्दिष्ट करने की आवश्यकता नहीं है - यह कोणीय पाचन चक्र के बाद निष्पादित हो जाएगा)। तत्व भी = तत्व [को ०]; एक बहुत बुरा अभ्यास है ... वैसे भी, समाधान मेरे लिए अच्छा नहीं है क्योंकि मुझे एक लाइन अनटाइल होने के लिए टेक्स्टारिया की आवश्यकता है और अधिक पाठ है।
— करोल वेब्स्की
2

textareaटाइपिंग का विस्तार करने के लिए आप JQuery का उपयोग कर सकते हैं :

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name="note"></textarea>
<div>
स्निपेट का विस्तार करें

— मॉरीशियो सेंचेज
स्रोत
सबसे साफ समाधान। लेकिन जैसा कि हमें jQuery का उपयोग करना बंद करना चाहिए: textarea.addEventListener ('कीअप', () => {textarea.style.height = 0; textarea.style.height = ${textarea.scrollHeight}px;});
— टोनी मिशेल क्यूबेट
2

जो लोग कोणीय के नए संस्करणों में समान हासिल करना चाहते हैं।

TextArea elementRef को पकड़ो।

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup)="autoGrow()" #textArea></textarea>

मैं एक और उपयोग के मामले को भी जोड़ रहा हूं जो थ्रेड को पढ़ने वाले कुछ उपयोगकर्ताओं को काम में आ सकता है, जब उपयोगकर्ता पाठ-क्षेत्र की ऊंचाई को कुछ ऊंचाई तक बढ़ाना चाहता है और फिर उस overflow:scrollपर है, तो उपरोक्त विधि को निर्दिष्ट उपयोग-मामले को प्राप्त करने के लिए बढ़ाया जा सकता है।

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }
— दिव्यांशु रावत
स्रोत
1

यहाँ कुछ उत्तर पैडिंग के लिए नहीं हैं।

यह मानते हुए कि आपके पास एक अधिकतम ऊंचाई है जिस पर आप नहीं जाना चाहते हैं, इसने मेरे लिए काम किया:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);
— hasen
स्रोत
1

एक और भी सरल, क्लीनर दृष्टिकोण यह है: 

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// और सीएसएस

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

सभी की जरूरत है कि .auto-heightकिसी भी वर्ग को जोड़ना हैtextarea लक्ष्य बनाना ।

एफएफ, क्रोम और सफारी में परीक्षण किया गया। मुझे बताएं कि क्या यह आपके लिए काम नहीं करता है, किसी भी कारण से। लेकिन, यह सबसे साफ और सरल तरीका है, जो मुझे काम करने के लिए मिला है। और यह बहुत अच्छा काम करता है! : डी

— पुनर्जीवित
स्रोत
क्या आपने संपादन के बाद पाठ को हटाने की कोशिश की? क्या टेक्सारिया का पतन हुआ?
— 18C
1

यह कोड पेस्ट करने के लिए काम करता है और डिलीट को भी सेलेक्ट करता है। 

onKeyPressTextMessage = function(){
			var textArea = event.currentTarget;
    	textArea.style.height = 'auto';
    	textArea.style.height = textArea.scrollHeight + 'px';
};
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>
स्निपेट का विस्तार करें

यहाँ JSFiddle है

— कुराने कुँई
स्रोत
1

मैं http://javierjulio.github.io/textarea-autosize से जावास्क्रिप्ट लाइब्रेरी की सिफारिश करता हूं ।

प्रति टिप्पणियों, प्लगइन उपयोग पर उदाहरण कोडब्लॉक जोड़ें:

<textarea class="js-auto-size" rows="1"></textarea>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

न्यूनतम आवश्यक CSS:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}
— orange01
स्रोत
1

MakeTextAreaResisable जो qQuery का उपयोग करता है

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}
— इगोर क्रुपिटस्की
स्रोत
1

कोई भी जवाब काम का नहीं लगता। लेकिन यह मेरे लिए काम करता है: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();
— किम होमन
स्रोत
यह स्वीकृत जवाब होना चाहिए, हालांकि "कीप" घटनाओं को सुनने के लिए पर्याप्त है
— बॉब रॉस
1

मेरा कार्यान्वयन बहुत सरल है, इनपुट में लाइनों की संख्या और (यह दिखाने के लिए कि यह एक textarea है, न्यूनतम 2 पंक्तियों की गणना करें:)

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

उत्तेजना के साथ पूर्ण कार्य उदाहरण: https://jsbin.com/kajosolini/1/edit?html,js,output

(और यह ब्राउज़र के मैनुअल आकार के उदाहरण के लिए हैंडल के साथ काम करता है)

— localhostdotdev
स्रोत
2
यह केवल तभी काम करता है जब आप "एंटर" दबाकर लाइन को तोड़ते हैं। यदि आप टेक्स्ट टेक्सारिया की चौड़ाई से अधिक लंबा है, लेकिन आप "एन्टर" नहीं मारते हैं, तो इसका विस्तार नहीं होता है।
— नथालिया जेवियर
1

स्वीकृत उत्तर ठीक काम कर रहा है। लेकिन इस सरल कार्यक्षमता के लिए बहुत सारे कोड हैं। नीचे वाला कोड ट्रिक करेगा।

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });
— karthik_krish
स्रोत
0

यहां मैंने TextArea के लिए MVC HTML हेल्पर का उपयोग करते समय किया है। मेरे पास बहुत से टेक्स्टएरिया तत्व थे इसलिए उन्हें मॉडल आईडी का उपयोग करके अलग करना पड़ा।

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

और स्क्रिप्ट में यह जोड़ा गया: 

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

मैंने IE10 और Firefox23 पर इसका परीक्षण किया है

— gunnerz
स्रोत
0

आप इस कोड का उपयोग कर सकते हैं:

Coffescript:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

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

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();
— Darex1991
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.