Erweitern Sie einen Textbereich automatisch mit jQuery

Wie kann ich ein Textfeld mit jQuery automatisch erweitern lassen?

Ich habe ein Textfeld zur Erläuterung der Tagesordnung des Meetings. Daher möchte ich dieses Textfeld erweitern, wenn der Text meiner Tagesordnung diesen Textfeldbereich weiter vergrößert.

Ich habe viele ausprobiert und dieser ist großartig. ^{Link ist tot. Neuere Version finden Sie hier . Siehe unten für die alte Version.}
Sie können es versuchen, indem Sie die Eingabetaste im Textbereich gedrückt halten. Vergleichen Sie den Effekt mit dem anderen Plugin für automatisch expandierende Textbereiche ....

bearbeiten basierend auf Kommentar

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

Hinweis: Sie sollten die benötigten JS-Dateien einschließen ...

Um die Bildlaufleiste in das Textfeld von Blinken auf zu verhindern und Ausschalten während der Expansion / Kontraktion, können Sie das Set overflowzu hiddenauch:

$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()

Aktualisieren:

Der obige Link ist defekt. Sie können die Javascript-Dateien jedoch weiterhin hier herunterladen .

Wenn Sie kein Plugin möchten, gibt es eine sehr einfache Lösung

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

Sehen Sie, wie es in einer jsFiddle funktioniert. Ich habe hier eine andere Textbereichsfrage beantwortet .

Um die Frage zu beantworten, ob Sie es in umgekehrter Reihenfolge tun oder verkleinern möchten, wenn Text entfernt wird: jsFiddle

Und wenn Sie ein Plugin wollen

@ Jason hat hier einen entworfen

Wächst / schrumpft im Textbereich. Diese Demo verwendet jQuery für die Ereignisbindung, ist jedoch in keiner Weise ein Muss.
( Keine IE - Unterstützung - IE reagiert nicht auf die Zeilen Attributänderung )

DEMO-SEITE

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

Javascript (aktualisiert)

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

• Automatisch wachsende Textbereiche
• jQuery Autosize

Sie können diesen versuchen

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>

Dank SpYk3HH habe ich mit seiner Lösung begonnen und daraus diese Lösung gemacht, die die Schrumpfungsfunktionalität hinzufügt und vermutlich noch einfacher und schneller ist.

$("textarea").keyup(function(e) {
    $(this).height(30);
    $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});

Getestet im aktuellen Chrome-, Firefox- und Android 2.3.3-Browser.

In einigen Browsern werden möglicherweise die Bildlaufleisten blinken. Fügen Sie dieses CSS hinzu, um das zu lösen.

textarea{ overflow:hidden; }

Um einen automatisch erweiterbaren Textbereich zu definieren, müssen Sie zwei Dinge tun:

1. Erweitern Sie es, sobald Sie auf die Eingabetaste klicken, oder geben Sie mehr als eine Zeile Inhalt ein.
2. Und verkleinern Sie es bei Unschärfe, um die tatsächliche Größe zu erhalten, wenn der Benutzer Leerzeichen eingegeben hat. ( Bonus )

Hier ist eine handgemachte Funktion , um die Aufgabe zu erfüllen.

Funktioniert gut mit fast allen Browsern (<IE7) . Hier ist die Methode:

    //Here is an event to get TextArea expand when you press Enter Key in it.
    // intiate a keypress event
    $('textarea').keypress(function (e) {  
       if(e.which == 13)   {   
       var control = e.target;                     
       var controlHeight = $(control).height();          
      //add some height to existing height of control, I chose 17 as my line-height was 17 for the control    
    $(control).height(controlHeight+17);  
    }
    }); 

$('textarea').blur(function (e) {         
    var textLines = $(this).val().trim().split(/\r*\n/).length;      
    $(this).val($(this).val().trim()).height(textLines*17);
    });

HIER ist ein Beitrag dazu.

Ich habe das Textarea Expander jQuery-Plugin bereits mit guten Ergebnissen verwendet.

Jeder sollte dieses jQuery-Plugin ausprobieren : xautoresize-jquery . Es ist wirklich gut und sollte Ihr Problem lösen.

function autosize(textarea) {
    $(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
    $(textarea).height($(textarea).prop("scrollHeight"));
}

$(document).ready(function () {
    $(document).on("input", "textarea", function() {
        autosize(this);
    });
    $("textarea").each(function () {
        autosize(this);
    });
});

(Dies funktioniert in Internet Explorer 9 oder älter nicht, da das inputEreignis verwendet wird.)

Ich habe gerade diese Funktion erstellt, um Textbereiche beim Laden von Seiten zu erweitern. Wechseln Sie einfach eachzu keyupund es wird auftreten, wenn der Textbereich eingegeben wird.

// On page-load, auto-expand textareas to be tall enough to contain initial content
$('textarea').each(function(){
    var pad = parseInt($(this).css('padding-top'));
    if ($.browser.mozilla) 
        $(this).height(1);
    var contentHeight = this.scrollHeight;
    if (!$.browser.mozilla) 
        contentHeight -= pad * 2;
    if (contentHeight > $(this).height()) 
        $(this).height(contentHeight);
});

Getestet in Chrome, IE9 und Firefox. Leider hat Firefox diesen Fehler, der den falschen Wert für zurückgibt scrollHeight, so dass der obige Code eine (hackige) Problemumgehung dafür enthält.

Ich habe einige Fehler in der Antwort von Reigel behoben (die akzeptierte Antwort):

1. Die Reihenfolge, in der HTML-Entitäten jetzt ersetzt werden, verursacht keinen unerwarteten Code im Schattenelement. (Das Original wurde durch ">" durch "& ampgt;" ersetzt, was in einigen seltenen Fällen zu einer falschen Berechnung der Höhe führte.)
2. Wenn der Text mit einer neuen Zeile endet, erhält der Schatten jetzt ein zusätzliches Zeichen "#", anstatt wie im Original eine feste zusätzliche Höhe zu haben.
3. Durch Ändern der Größe des Textbereichs nach der Initialisierung wird die Breite des Schattens aktualisiert.
4. Zeilenumbruch hinzugefügt: Unterbrechungswort für Schatten, daher wird es genauso gebrochen wie ein Textbereich (Erzwingen von Unterbrechungen für sehr lange Wörter)

Es gibt einige verbleibende Probleme in Bezug auf Räume. Ich sehe keine Lösung für doppelte Leerzeichen, sie werden als einzelne Leerzeichen im Schatten angezeigt (HTML-Rendering). Dies kann nicht mit & nbsp; behoben werden, da die Leerzeichen unterbrochen werden sollten. Außerdem bricht der Textbereich eine Linie nach einem Leerzeichen. Wenn für dieses Leerzeichen kein Platz vorhanden ist, wird die Linie an einem früheren Punkt unterbrochen. Vorschläge sind willkommen.

Korrigierter Code:

(function ($) {
    $.fn.autogrow = function (options) {
        var $this, minHeight, lineHeight, shadow, update;
        this.filter('textarea').each(function () {
            $this = $(this);
            minHeight = $this.height();
            lineHeight = $this.css('lineHeight');
            $this.css('overflow','hidden');
            shadow = $('<div></div>').css({
                position: 'absolute',
                'word-wrap': 'break-word',
                top: -10000,
                left: -10000,
                width: $this.width(),
                fontSize: $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize: 'none'
            }).appendTo(document.body);
            update = function () {
                shadow.css('width', $(this).width());
                var val = this.value.replace(/&/g, '&amp;')
                                    .replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/\n/g, '<br/>')
                                    .replace(/\s/g,'&nbsp;');
                if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
                shadow.html(val);
                $(this).css('height', Math.max(shadow.height(), minHeight));
            };
            $this.change(update).keyup(update).keydown(update);
            update.apply(this);
        });
        return this;
    };
}(jQuery));

Code von SpYk3HH mit Zusatz zum Schrumpfen der Größe.

function get_height(elt) {
    return elt.scrollHeight + parseFloat($(elt).css("borderTopWidth")) + parseFloat($(elt).css("borderBottomWidth"));
}

$("textarea").keyup(function(e) {
    var found = 0;
    while (!found) {
        $(this).height($(this).height() - 10);
        while($(this).outerHeight() < get_height(this)) {
            $(this).height($(this).height() + 1);
            found = 1;
        };
    }
});

Das hat bei mir besser funktioniert:

$('.resiText').on('keyup input', function() { 
$(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
});

.resiText {
    box-sizing: border-box;
    resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="resiText"></textarea>

Die Leute scheinen sehr überarbeitete Lösungen zu haben ...

So mache ich es:

  $('textarea').keyup(function()
  {
    var 
    $this  = $(this),
    height = parseInt($this.css('line-height'),     10),
    padTop = parseInt($this.css('padding-top'),     10),
    padBot = parseInt($this.css('padding-bottom'),  10);

    $this.height(0);

    var 
    scroll = $this.prop('scrollHeight'),
    lines  = (scroll  - padTop - padBot) / height;

    $this.height(height * lines);
  });

Dies funktioniert sowohl mit langen Zeilen als auch mit Zeilenumbrüchen. Wächst und schrumpft.

Ich habe diese Abfragefunktion geschrieben, die zu funktionieren scheint.

Sie müssen jedoch die Mindesthöhe in CSS angeben. Wenn Sie keine Codierung vornehmen möchten, muss diese zweistellig sein. dh 12px;

$.fn.expand_ta = function() {

var val = $(this).val();
val = val.replace(/</g, "&lt;");
val = val.replace(/>/g, "&gt;");
val += "___";

var ta_class = $(this).attr("class");
var ta_width = $(this).width();

var min_height = $(this).css("min-height").substr(0, 2);
min_height = parseInt(min_height);

$("#pixel_height").remove();
$("body").append('<pre class="'+ta_class+'" id="pixel_height" style="position: absolute; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; width: '+ta_width+'px; height: auto;"></pre>');
$("#pixel_height").html(val);

var height = $("#pixel_height").height();
if (val.substr(-6) == "<br />"){
    height = height + min_height;
};
if (height >= min_height) $(this).css("height", height+"px");
else $(this).css("height", min_height+"px");
}

Wenn Sie das von Reigel veröffentlichte Plugin verwenden, beachten Sie bitte, dass dadurch die Funktion zum Rückgängigmachen in Internet Explorer deaktiviert wird (probieren Sie die Demo aus).

Wenn dies ein Problem für Dich ist , dann würde ich vorschlagen , die Verwendung von Plug - gepostet @richsage statt, da es nicht von diesem Problem leidet. Weitere Informationen finden Sie im zweiten Aufzählungspunkt unter Suchen nach dem Textbereich für die ultimative Größenänderung .

Es gibt auch das sehr coole bgrins/ExpandingTextareas (github)Projekt, das auf einer Veröffentlichung von Neill Jenkins mit dem Titel Expanding Text Areas Made Elegant basiert

Ich wollte Animationen und automatische Verkleinerung. Die Kombination ist anscheinend schwierig, weil die Leute ziemlich intensive Lösungen dafür gefunden haben. Ich habe es auch multitextbereichssicher gemacht. Und es ist nicht so lächerlich schwer wie das jQuery-Plugin.

Ich habe mich basierend auf Vsync Antwort (und die Verbesserung er es wieder gut gemacht), http://codepen.io/anon/pen/vlIwj die codepen für meine Verbesserung.

HTML

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

CSS

body{ background:#728EB2; }

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
  transition:all 1s;
  -webkit-transition:all 1s;
}

JS

var rowheight = 0;

$(document).on('input.textarea', '.autoExpand', function(){
    var minRows = this.getAttribute('data-min-rows')|0,
        rows    = this.value.split("\n").length;
    $this = $(this);
    var rowz = rows < minRows ? minRows : rows;
    var rowheight = $this.attr('data-rowheight');
    if(!rowheight){
      this.rows = rowz;
      $this.attr('data-rowheight', (this.clientHeight  - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))/ rowz);
    }else{
      rowz++;
      this.style.cssText = 'height:' + rowz * rowheight + 'px'; 
    }
});

Es gibt viele Antworten darauf, aber ich fand etwas sehr Einfaches, füge dem Textbereich ein Keyup-Ereignis hinzu und überprüfe, ob die Taste gedrückt wird. Der Tastencode lautet 13

keyPressHandler(e){ if(e.keyCode == 13){ e.target.rows = e.target.rows + 1; } }

Dadurch wird Ihrem Textbereich eine weitere Zeile hinzugefügt, und Sie können die Breite mithilfe von CSS formatieren.

Angenommen, Sie versuchen dies mit Knockout zu erreichen. So geht's:

Auf Seite:

<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>

Im Ansichtsmodell:

self.GrowTextArea = function (data, event) {
    $('#' + event.target.id).height(0).height(event.target.scrollHeight);
}

Dies sollte auch dann funktionieren, wenn Sie wie ich mehrere Textbereiche von einem Knockout foreach erstellt haben.

Einfache Lösung:

HTML:

<textarea class='expand'></textarea>

JS:

$('textarea.expand').on('input', function() {
  $(this).scrollTop($(this).height());
});
$('textarea.expand').scroll(function() {
  var h = $(this).scrollTop();
  if (h > 0)
    $(this).height($(this).height() + h);
});

https://fiddle.jshell.net/7wsnwbzg/

Die einfachste Lösung:

html:

<textarea class="auto-expand"></textarea>

CSS:

.auto-expand {
    overflow:hidden;
    min-height: 80px;
}

js (jquery):

$(document).ready(function () {
 $("textarea.auto-expand").focus(function () {
        var $minHeight = $(this).css('min-height');
        $(this).on('input', function (e) {
            $(this).css('height', $minHeight);
            var $newHeight = $(this)[0].scrollHeight;
            $(this).css('height', $newHeight);
        });
    });       
});

Lösung mit reinem JS

function autoSize() {
  if (element) {
    element.setAttribute('rows', 2) // minimum rows
    const rowsRequired = parseInt(
      (element.scrollHeight - TEXTAREA_CONFIG.PADDING) / TEXTAREA_CONFIG.LINE_HEIGHT
    )
    if (rowsRequired !== parseInt(element.getAttribute('rows'))) {
      element.setAttribute('rows', rowsRequired)
    }
  }
}

https://jsfiddle.net/Samb102/cjqa2kf4/54/

Dies ist die Lösung, die ich letztendlich verwendet habe. Ich wollte eine Inline-Lösung, und dies scheint bisher großartig zu funktionieren:

<textarea onkeyup="$(this).css('height', 'auto').css('height', this.scrollHeight + this.offsetHeight - this.clientHeight);"></textarea>

function autoResizeTextarea() {
  for (let index = 0; index < $('textarea').length; index++) {
    let element = $('textarea')[index];
    let offset = element.offsetHeight - element.clientHeight;
    $(element).css('resize', 'none');
    $(element).on('input', function() {
      $(this).height(0).height(this.scrollHeight - offset - parseInt($(this).css('padding-top')));
    });
  }
}

https://codepen.io/nanachi1/pen/rNNKrzQ

das sollte funktionieren.

@Georgiy Ivankin machte einen Vorschlag in einem Kommentar, ich habe ihn erfolgreich verwendet :) -, aber mit geringfügigen Änderungen:

$('#note').on('keyup',function(e){
    var maxHeight = 200; 
    var f = document.getElementById('note'); 
    if (f.clientHeight < f.scrollHeight && f.scrollHeight < maxHeight ) 
        { f.style.height = f.scrollHeight + 'px'; }
    });      

Es hört auf zu expandieren, sobald es die maximale Höhe von 200px erreicht hat

Alte Frage, aber Sie könnten so etwas tun:

html:

<textarea class="text-area" rows="1"></textarea>

jquery:

var baseH; // base scroll height

$('body')
    .one('focus.textarea', '.text-area', function(e) {
        baseH = this.scrollHeight;
    })
    .on('input.textarea', '.text-area', function(e) {
        if(baseH < this.scrollHeight) {
            $(this).height(0).height(this.scrollHeight);
        }
        else {
            $(this).height(0).height(baseH);
        }
    });

Auf diese Weise gilt die automatische Größenänderung für alle Textbereiche mit der Klasse "Textbereich". Schrumpft auch, wenn Text entfernt wird.

jsfiddle:

https://jsfiddle.net/rotaercz/46rhcqyn/

Versuche dies:

  $('textarea[name="mytextarea"]').on('input', function(){
    $(this).height('auto').height($(this).prop('scrollHeight') + 'px');
  }).trigger('input');

Einfache jQuery-Lösung:

$("textarea").keyup(function() {
    var scrollHeight = $(this).prop('scrollHeight') - parseInt($(this).css("paddingTop")) - parseInt($(this).css("paddingBottom"));

    if (scrollHeight > $(this).height()) {
        $(this).height(scrollHeight + "px");
    }
});

HTML:

<textarea rows="2" style="padding: 20px; overflow: hidden; resize: none;"></textarea>

Überlauf sollte ausgeblendet werden . Die Größenänderung ist keine, wenn Sie die Größe nicht mit der Maus ändern möchten.