Automatyczne zaznaczanie pola tekstowego przy użyciu prototypu

Jednym z udoskonaleń niektórych z tych odpowiedzi jest pozwolić CSS zrobić więcej pracy.

Podstawowa trasa wydaje się być:

1. Tworzenie elementu kontenera do przechowywania textarea i ukrytego div
2. używając Javascript, zachowaj synchronizację zawartości textarea z div'S
3. pozwól przeglądarce wykonać pracę obliczania wysokości tego div
4. ponieważ przeglądarka obsługuje rendering / rozmiar ukrytego div, unikamy jawne ustawienie textarea ' s wzrost.

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;
    width: 100%;
}

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

Oto kolejna technika automatyzacji obszaru tekstowego.

• używa wysokości piksela zamiast wysokości linii: dokładniejsza obsługa zawijania linii, jeśli używana jest proporcjonalna czcionka.
• akceptuje ID lub element jako wejście
• akceptuje opcjonalny parametr Maksymalna wysokość - przydatny, jeśli nie chcesz, aby obszar tekstowy powiększył się o określony rozmiar (zachowaj wszystko na ekranie, unikaj łamania układu itp.)
• Testowane na Firefoksie 3 i Internet Explorer 6

Kod: (plain vanilla 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 textarea wpisuję teraz - jeśli masz Firebug zainstalowany, wklej oba sample do konsoli i przetestuj na tej stronie)

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

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 div lub czegoś podobnego.

Uwaga: być może będziesz musiał grać this.style.height = (this.scrollHeight) + "px"; w zależności od tego, jak stylujesz tekstarea(wysokość linii, padding i tego typu rzeczy).

Oto prototyp Wersja zmiany rozmiaru obszaru tekstowego, który nie jest zależny od liczby kolumn w obszarze tekstowym. Jest to lepsza technika, ponieważ pozwala kontrolować obszar tekstowy za pomocą CSS, a także mieć zmienną szerokość textarea. Dodatkowo ta wersja wyświetla liczbę pozostałych znaków. Chociaż nie jest to wymagane, jest to bardzo przydatna funkcja i jest łatwo usuwana, 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 wywołując new Widget.Textarea('element_id'). Domyślnymi opcjami mogą być nadpisane przez podanie ich jako obiektu, np. new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Jeśli chcesz utworzyć go dla wszystkich tekstów na stronie, zrób coś w stylu:

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

Oto rozwiązanie z JQuery:

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

abc jest teaxtarea.

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

Po prostu wracając do tego, zrobiłem to trochę uporządkowane (choć ktoś, kto jest pełna butelka na Prototype / JavaScript może sugerować 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');

Zrobiłem coś łatwego. Najpierw umieściłem TextArea w DIV. Po drugie, wywołałem funkcję ready do 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)));
});

Potrzebowałem tej funkcji dla siebie, ale żaden z nich stąd nie działał tak, jak ich potrzebowałem.

Dodałem minimalną wysokość, aby na destrukcji nie stała się zbyt mała.

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

Jak odpowiedź @memical.

Znalazłem jednak pewne ulepszenia. Możesz użyć funkcji jQuery height(). Pamiętaj jednak o pikselach padding-top i padding-bottom. W przeciwnym razie textarea będzie rosnąć 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);
  });
});

Oto rozszerzenie do prototypowego widżetu, który Jeremy opublikował 4 czerwca:

Uniemożliwia użytkownikowi wprowadzanie większej liczby znaków, jeśli używasz ograniczeń w tekstach. Sprawdza, czy zostały znaki. Jeśli użytkownik skopiuje tekst do obszaru textarea, tekst zostanie odcięty maksymalnie. 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'));
  }
});

@memical miał niesamowite rozwiązanie do ustawiania wysokości textarea na pageload z jQuery, ale dla mojej aplikacji chciałem być w stanie zwiększyć wysokość textarea jak użytkownik dodał więcej treści. Zbudowałem rozwiązanie memical z następującym:

$(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 bardzo gładka, ale nie jest to również aplikacja skierowana do klienta, więc gładkość nie ma znaczenia. (Gdyby to było skierowane do klienta, prawdopodobnie użyłbym po prostu auto-resize jQuery plugin.)

Dla tych, którzy kodują dla IE i napotykają ten problem. IE ma małą sztuczkę, która sprawia, że 100% CSS.

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

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

Internet Explorer, Safari, Chrome i Opera użytkownicy muszą pamiętać o wyraźnym ustawieniu wartości line-height w CSS. Wykonuję 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>

Oto funkcja, którą napisałem w jQuery, aby to zrobić - możesz ją przenieść 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 kontraktuje się po naciśnięciu delete lub backspace.

Ta wersja opiera się na jQuery 1.4.2.

Enjoy;)

Http://pastebin.com/SUKeBtnx

Użycie:

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

Lub (dowolny selektor jQuery dla przykład)

$("textarea").textareacontrol();

Został przetestowany na Internet Explorer 7/Internet Explorer 8 , Firefox 3.5 i Chrome. Wszystko działa dobrze.

Za pomocą 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>

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

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

Jak na razie bardzo mi się podoba jak to działa i nie obchodzą mnie inne przeglądarki, więc pewnie zastosuję to do wszystkich moich 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
}