Jak automatycznie zmienić rozmiar obszaru tekstu za pomocą Prototype?

121

Obecnie pracuję nad wewnętrzną aplikacją sprzedażową dla firmy, dla której pracuję, i mam formularz, który umożliwia użytkownikowi zmianę adresu dostawy.

Teraz myślę, że wyglądałoby to o wiele ładniej, gdyby obszar tekstu, którego używam do głównych szczegółów adresu, po prostu zajmowałby obszar tekstu w nim i automatycznie zmieniał rozmiar, jeśli tekst został zmieniony.

Oto jego zrzut ekranu.

Adres ISO

Jakieś pomysły?

@Chris

Dobra uwaga, ale są powody, dla których chcę zmienić rozmiar. Chcę, aby obszar, jaki zajmuje, był obszarem informacji w nim zawartych. Jak widać na zrzucie ekranu, jeśli mam stały obszar tekstu, zajmuje to sporo miejsca w pionie.

Mogę zmniejszyć czcionkę, ale adres powinien być duży i czytelny. Teraz mogę zmniejszyć rozmiar pola tekstowego, ale wtedy mam problemy z ludźmi, którzy mają wiersz adresu, który zajmuje 3 lub 4 (jeden zajmuje 5) wierszy. Konieczność, aby użytkownik korzystał z paska przewijania, jest głównym nie do przyjęcia.

Myślę, że powinienem być bardziej szczegółowy. Jestem po zmianie rozmiaru w pionie, a szerokość nie ma większego znaczenia. Jedynym problemem, który się z tym wiąże, jest to, że numer ISO (duża „1”) jest wypychany pod adres, gdy szerokość okna jest zbyt mała (jak widać na zrzucie ekranu).

Nie chodzi o to, żeby ćwiczyć; chodzi o posiadanie pola tekstowego, które użytkownik może edytować, które nie będzie zajmować niepotrzebnego miejsca, ale pokaże cały tekst w nim.

Chociaż jeśli ktoś znajdzie inny sposób podejścia do problemu, ja też jestem na to otwarty.

Zmodyfikowałem trochę kod, ponieważ działał trochę dziwnie. Zmieniłem to tak, aby aktywował się przy keyup, ponieważ nie uwzględniałby znaku, który został właśnie wpisany.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

javascript html css textarea prototypejs Mikrofon
źródło

Czy możesz stworzyć witrynę demonstracyjną, na której będziemy mogli zobaczyć, jak to działa?

Einar Ólafsson

3

ta wtyczka wydaje się dobra jacklmoore.com/autosize

Gaurav Shah

Czy istnieje wersja JQuery? Jak uzyskać dostęp do kolumn i wierszy TextArea w JQuery?

Zach,

Prawie to samo, ale z wyraźnym wymogiem, który powinien się zmniejszyć po usunięciu tekstu: stackoverflow.com/questions/454202/…

Ciro Santilli 郝海东冠状病六四事件法轮功

75

Facebook robi to, kiedy piszesz na ścianach ludzi, ale zmienia rozmiar tylko w pionie.

Pozioma zmiana rozmiaru wydaje mi się bałaganem z powodu zawijania słów, długich linii itd., Ale pionowa zmiana rozmiaru wydaje się być całkiem bezpieczna i przyjemna.

Żaden ze znanych mi początkujących użytkowników Facebooka nie wspomniał o tym ani nie był zdezorientowany. Użyłbym tego jako anegdotycznego dowodu, aby powiedzieć „śmiało, wdrażaj to”.

Trochę kodu JavaScript, aby to zrobić, używając Prototype (bo to jest to, co znam):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

PS: Oczywiście ten kod JavaScript jest bardzo naiwny i niezbyt dobrze przetestowany, i prawdopodobnie nie chcesz go używać na polach tekstowych zawierających powieści, ale masz ogólny pomysł.

Orion Edwards
źródło

2

Zakłada się, że przeglądarka łamie się przy dowolnym znaku, co jest nieprawidłowe. Spróbuj <textarea cols='5'>0 12345 12345 0</textarea>. (Napisałem prawie identyczną implementację i złapałem ją dopiero po miesiącu używania.) Nie udaje się również dla pustych wierszy.

st-boost

Czy jest do tego wersja JQuery?

emeraldhieu

Lewy ukośnik w $ A (str.split ("\ n")) wymaga innego. (Moja edycja powyższej odpowiedzi z jakiegoś powodu nie przetrwała.)

gherson

67

Udoskonaleniem niektórych z tych odpowiedzi jest umożliwienie CSS wykonania większej ilości pracy.

Wydaje się, że podstawowa trasa to:

Utwórz element kontenera do przechowywania textareai ukrytydiv
Przy użyciu JavaScript, zachować textarea„s zawartość zsynchronizowane z div” s
Pozwól przeglądarce obliczyć wysokość tego elementu div
Ponieważ przeglądarka obsługuje renderowanie / zmienianie rozmiaru ukrytego div, unikamy jawnego ustawiania textareawysokości.

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}

html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}

<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

Rozwiń fragment

Jan Miksovsky
źródło

5

To świetne rozwiązanie! Jedynym zastrzeżeniem jest to, że przeglądarki, które nie obsługują rozmiaru pola (IE <7), nie obliczą poprawnie szerokości i dlatego stracisz trochę dokładności, ale jeśli zostawisz miejsce na końcu linii, nadal powinno być dobrze. Zdecydowanie uwielbiam to za prostotę.

Antonio Salazar Cardozo

4

Pozwoliłem sobie zaimplementować to rozwiązanie jako samodzielną, prostą w użyciu wtyczkę jQuery, która nie wymaga żadnych znaczników ani stylizacji. xion.io/jQuery.xarea na wypadek, gdyby ktoś mógł go użyć :)

Xion

2

ustawienie textCopy na hidden nadal pozwala ukrytym div zajmować miejsce w znacznikach, więc gdy zawartość textCopy stanie się większa, w końcu otrzymasz pasek przewijania na całej długości twojej strony ...

topwik

1

Kolejna fajna poprawka do tego; var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';zapewnia, że nie pojawi się szarpane zachowanie podczas przechodzenia z pustej nowej linii na końcu obszaru tekstowego do niepustej, ponieważ ukryty element div zapewnia zawijanie do nbsp.

nieświadomie

1

@nieświadomie świetne wezwanie do dodania „& nbsp;” aby pozbyć się tego nagłego wzrostu rozmiaru po dodaniu pierwszej litery do nowej linii - dla mnie jest zepsuta bez tego - to należy dodać do odpowiedzi!

davnicwil

40

Oto inna technika automatycznego określania rozmiaru obszaru tekstu.

Używa wysokości w pikselach zamiast wysokości linii: dokładniejsza obsługa zawijania linii, jeśli używana jest czcionka proporcjonalna.
Akceptuje identyfikator lub element jako dane wejściowe
Akceptuje opcjonalny parametr maksymalnej wysokości - przydatny, jeśli wolisz nie pozwolić, aby obszar tekstowy przekroczył określony rozmiar (zachowaj go na ekranie, unikaj niszczenia układu itp.)
Przetestowano w przeglądarkach Firefox 3 i Internet Explorer 6

Kod: (zwykły waniliowy JavaScript)

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

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

   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";
   }
}

Demo: (używa jQuery, cele w obszarze tekstowym, w którym teraz piszę - jeśli masz zainstalowany Firebug , wklej oba przykłady do konsoli i przetestuj na tej stronie)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

Shog9
źródło

@SMB - to prawdopodobnie nie byłoby zbyt trudne do wdrożenia, po prostu dodaj kolejny warunek

Jason

@Jason: Kiedy tekst w polu nie wypełnia go clientHeighti scrollHeightjest równy, więc nie możesz użyć tej metody, jeśli chcesz, aby obszar tekstowy zarówno się kurczył, jak i powiększał.

Brant Bobby

Aby po prostu się skurczyć, wystarczy dodać ten kod przed linią 6:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";

Gapipro

14

Prawdopodobnie najkrótsze rozwiązanie:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

W ten sposób nie potrzebujesz żadnych ukrytych elementów div ani niczego podobnego.

Uwaga: może być konieczne granie w this.style.height = (this.scrollHeight) + "px";zależności od tego, jak stylizujesz obszar tekstu (wysokość linii, dopełnienie i tego typu rzeczy).

Eduard Luca
źródło

Najlepsze rozwiązanie, jeśli nie masz nic przeciwko miganiu paska przewijania.

cfillol

Wystarczyłoby złapanie tylko zdarzenia keyup. Nie sądzisz?

cfillol

2

Ustaw właściwość textarea overflow na „hidden”, aby pasek przewijania nie migał.

cfillol

keyupmoże wystarczyć, ale nie jestem pewien. Byłem tak szczęśliwy, że to rozgryzłem, że przestałem próbować czegokolwiek innego.

Eduard Luca

Nadal próbuję się dowiedzieć, dlaczego dodałeś this.style.height = "1px"; lub this.style.height = "auto"; przed. Wiem, że textarea nie zmieni rozmiaru, gdy usuniemy zawartość, jeśli nie dodamy tej linii. Czy ktoś może chcieć wyjaśnić?

Balasubramani M

8

Oto prototypowa wersja zmiany rozmiaru obszaru tekstowego, która nie jest zależna od liczby kolumn w tym obszarze. Jest to doskonała technika, ponieważ pozwala kontrolować obszar tekstowy za pomocą CSS, a także mieć zmienną szerokość obszaru tekstowego. Ponadto ta wersja wyświetla liczbę pozostałych znaków. Chociaż nie jest to wymagane, jest to całkiem przydatna funkcja i można ją łatwo usunąć, jeśli jest niechciana.

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

Utwórz widżet, dzwoniąc new Widget.Textarea('element_id'). Domyślne opcje można nadpisać przekazując je jako obiekt, np new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Jeśli chcesz go utworzyć dla wszystkich obszarów tekstowych na stronie, zrób coś takiego:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

Jeremy Kauffman
źródło

7

Oto rozwiązanie z JQuery:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abcjest teaxtarea.

memical
źródło

5

Sprawdź poniższy link: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

Gyan
źródło

Martwy link. Kod jest tutaj james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/…

Matthew Hui

3

Wracając do tego, uczyniłem to trochę bardziej uporządkowanym (chociaż ktoś, kto ma pełną butelkę na Prototype / JavaScript, mógłby zasugerować ulepszenia?).

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

Wystarczy zadzwonić z:

new TextAreaResize('textarea_id_name_here');

Mikrofon
źródło

3

Zrobiłem coś całkiem łatwego. Najpierw umieściłem TextArea w DIV. Po drugie, wywołałem readyfunkcję tego skryptu.

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

Prosty. Jest to maksymalna wysokość renderowanego elementu div podzielona przez wysokość jednego obiektu TextArea w jednym wierszu.

Eduardo Mass
źródło

2

Potrzebowałem tej funkcji dla siebie, ale żadna z tych tutaj nie działała tak, jak ich potrzebowałem.

Więc użyłem kodu Oriona i zmieniłem go.

Dodałem na minimalnej wysokości, aby na zniszczeniu nie zrobiło się za małe.

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

Peter Mortensen
źródło

2

Podobnie jak odpowiedź @memical.

Jednak znalazłem pewne ulepszenia. Możesz użyć height()funkcji jQuery . Pamiętaj jednak o pikselach dopełniających górnych i dolnych. W przeciwnym razie obszar tekstowy będzie się rozwijał zbyt szybko.

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

Anatolij Mironow
źródło

2

Moje rozwiązanie nie używające jQuery (ponieważ czasami nie muszą być tym samym) jest poniżej. Chociaż został przetestowany tylko w przeglądarce Internet Explorer 7 , społeczność może wskazać wszystkie przyczyny tego błędu:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

Jak dotąd bardzo podoba mi się to, jak to działa i nie obchodzą mnie inne przeglądarki, więc prawdopodobnie zastosuję to do wszystkich moich obszarów tekstowych:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

user1566694
źródło

1

Oto rozszerzenie widżetu Prototyp, które Jeremy opublikował 4 czerwca:

Uniemożliwia użytkownikowi wprowadzanie większej liczby znaków, jeśli używasz ograniczeń w obszarach tekstu. Sprawdza, czy zostały jeszcze znaki. Jeśli użytkownik skopiuje tekst do obszaru tekstowego, tekst zostanie odcięty przy max. długość:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://stackoverflow.com/questions/7477/autosizing-textarea
 * Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
 */
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options){
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function(){ 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});

małpa lorem
źródło

1

@memical miał świetne rozwiązanie do ustawiania wysokości textarea na pageload z jQuery, ale w mojej aplikacji chciałem mieć możliwość zwiększania wysokości textarea, gdy użytkownik dodawał więcej treści. Zbudowałem rozwiązanie Memical z następującymi elementami:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

Nie jest zbyt płynna, ale nie jest też aplikacją skierowaną do klienta, więc płynność tak naprawdę nie ma znaczenia. (Gdyby to było skierowane do klienta, prawdopodobnie użyłbym po prostu wtyczki jQuery z automatyczną zmianą rozmiaru).

WN Rosenberg
źródło

1

Dla tych, którzy kodują dla IE i napotykają ten problem. IE ma małą sztuczkę, dzięki której jest w 100% CSS.

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

Możesz nawet podać wartość dla wierszy = "n", którą IE będzie ignorować, ale inne przeglądarki będą używać. Naprawdę nienawidzę kodowania, które implementuje hacki IE, ale ten jest bardzo pomocny. Możliwe, że działa tylko w trybie Quirks.

Einstein47
źródło

1

Użytkownicy przeglądarek Internet Explorer, Safari, Chrome i Opera muszą pamiętać o jawnym ustawieniu wartości wysokości linii w CSS. Tworzę arkusz stylów, który ustawia początkowe właściwości dla wszystkich pól tekstowych w następujący sposób.

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

Larry
źródło

1

Oto funkcja, którą właśnie napisałem w jQuery, aby to zrobić - możesz przenieść ją do Prototype , ale nie obsługują one "żywotności" jQuery, więc elementy dodane przez żądania Ajax nie będą odpowiadać.

Ta wersja nie tylko rozszerza się, ale także kurczy się po naciśnięciu klawisza Delete lub Backspace.

Ta wersja opiera się na jQuery 1.4.2.

Cieszyć się ;)

http://pastebin.com/SUKeBtnx

Stosowanie:

$("#sometextarea").textareacontrol();

lub (na przykład dowolny selektor jQuery)

$("textarea").textareacontrol();

Został przetestowany w przeglądarce Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5 i Chrome. Wszystko działa dobrze.

Alex
źródło

1

Używając ASP.NET, po prostu zrób to:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>

Pat Murray
źródło

Jak automatycznie zmienić rozmiar obszaru tekstu za pomocą Prototype?

Odpowiedzi: