CSS Textarea, die sich bei der Eingabe von Text ausdehnt

Ich habe eine Textarea, wo Benutzer können text. Standardmäßig hat eine Höhe von 17px. Jedoch, wenn Benutzer fügen eine Menge text, ich will den text Bereich entsprechend zu erweitern. Gibt es eine Möglichkeit dies mit CSS ? Vielen Dank im Voraus!!

InformationsquelleAutor der Frage Spencer | 2011-02-10

21

Diese nicht mit CSS allein. versuchen Sie die automatische Vergrößerung jquery-plugin.
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

Können Sie auch sehen, die automatische Vergrößerung demo hier http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html

Es ist leicht und einfach zu bedienen. Hier ist, wie es gemacht wird. Definieren Sie Ihre textarea id. Zählen Sie die jquery js-Datei, bevor </body>. Dann zwischen den script-tags, geben Sie den jquery-Befehl $("#txtInput").autoGrow();
```
<body>
    <textarea id="txtInput"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<script>
    $("#txtInput").autogrow();
</script>
</body>
```
InformationsquelleAutor der Antwort Hussein
19

Diesem jQuery-plugin ist eine wirklich tolle:
http://www.jacklmoore.com/autosize

Habe ich getestet, ein paar von diesen, und diese ist mit Abstand die schönste. Gibt auch ein Beispiel mit einem CSS-übergang Effekt ist ziemlich glatt.

InformationsquelleAutor der Antwort sirkitree
12

Brauchen Sie nicht ein plugin für diese. Dies funktioniert auf Texteingabefelder an jede Größe, Höhe oder Zeile Größe und wird nur funktionieren, wenn der Inhalt übersteigt die textarea. Erstens legen Sie den überlauf auf Ihr Ziel Texteingabefelder zu versteckt und die Größe auf "keine", dann fügen Sie die folgenden Funktionen auf die Texteingabefelder, die Sie wollen, um die automatische Vergrößerung. Es wird nicht nur erhöhen Sie die textarea-Größe wie der Benutzer eingibt, es werden auch automatisch verkleinern, wenn Sie zu löschen Zeug.
```
$('textarea').on('paste input', function () {
    if ($(this).outerHeight() > this.scrollHeight){
        $(this).height(1)
    }
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))){
        $(this).height($(this).height() + 1)
    }
});
```
Es funktioniert durch die Messung, wenn die scroll-Höhe der textarea ist größer als die äußere Höhe, die es nur werden, wenn es mehr text als das textarea-halten kann - und es dauert border Größe in Betracht für höhere Genauigkeit. Mit einfügen und Eingabe bedeutet, dass es nur zu erhöhen, wenn der Benutzer physisch, ändert sich der Wert der textarea, im Gegensatz zu, wenn Sie eine beliebige Taste drücken. Es ist kleinlich, aber ein textarea sollte nicht wachsen, wenn jemand drückt eine Taste oder so etwas.

Könnte es klug sein, fügen Sie eine Nicht-JS-Möglichkeit, die re-aktiviert, überlauf-und Größenanpassung für diejenigen, die nicht über Javascript, sonst werden Sie stecken mit einer winzigen box.

InformationsquelleAutor der Antwort Woody Payne

JavaScript für diese.

Dieses Skript überprüft die Länge von text-Bereich nach jedem Tastendruck gibt es (copypasta von hier):

  <textarea name="x" onKeyUp="SetNewSize(this);" cols="5" rows="4"></textarea>
    <script language="javascript">
    function SetNewSize(textarea){
      if (textarea.value.length > 5){
        textarea.cols = 50;
        textarea.rows = 50;
      }  else{
         textarea.cols = 10;
         textarea.rows = 15;
      }
    }
  </script>

InformationsquelleAutor der Antwort Nikita Barsukov

Erweiterung textarea, wie Sie geben

Typ etwas in textarea um den Effekt zu sehen

<script>    
function increseRows(selector)
{
    $(selector).attr("rows", $(selector).val().split("\n").length+1||2);
}
</script>

CSS Textarea, die sich bei der Eingabe von Text ausdehnt

InformationsquelleAutor der Antwort Prem Kumar Maurya

Verwende ich die folgenden (mit jQuery):

$(function () {
    'use strict';
    $("textarea").on('change keyup paste input', function () {
        $(this).attr("rows", Math.max($(this).val().split("\n").length || 1, $(this).attr("rows") || 1));
        $(this).css("width", $(this).css("width"));
    }).trigger('change');
});

Beachten Sie, dass es reagiert auf verschiedene Ereignisse, erhöht sich nur die Anzahl der Zeilen (D. H. nicht abnehmen), löst eine anfängliche ändern (z.B. um die Größe beim surfen wieder auf eine form mit vielen Linien)

InformationsquelleAutor der Antwort DigitalDan

Diese scheint zu sein, viel effizienter und Griffe max-Höhe

$(ctrl).on('paste input', function () {
    var dyLineHeight, dyMax, dyHeight;        
    if ($(this).outerHeight() > this.scrollHeight)
        $(this).height($(this).outerHeight() - parseFloat($(this).css("borderBottomWidth")) - parseFloat($(this).css("borderTopWidth")));
    dyLineHeight = Math.max(3, parseInt($(this).css("line-height")));
    dyMax = parseInt($(this).css("max-height"));
    while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")))
        {
        dyHeight = $(this).height();
        if (dyHeight >= dyMax)
            break;
        $(this).height(dyHeight + dyLineHeight)
        }
});

InformationsquelleAutor der Antwort Glenn Kreisel

0

Javascript Verwenden. textarea-Komponente verhält sich wie ein Textfeld, und Sie das ändern wollen (Sie wollen es sich zu Verhalten wie ein div-Element), so haben Sie zu hacken in das von Ihnen gewünschte Verhalten.

Hier ist eine Lösung, die ich irgendwo gefunden vor ein paar Monaten, aber nicht in der Lage, wieder zu finden. Es kann meinen eigenen Geschmack Hinzugefügt:

Markup:
```
<div>
  <textarea class='my-textarea' />
  <div className='my-textarea autogrow' style="display: 'none';" />
</div>
```
Stile:
```
.my-textarea {
  border: 1px solid #bbb;
  font-family: Helvetica;
  font-size: 15px;
  overflow: hidden;
  padding: 5px;
  resize: none;
}

//Needs same styles as the textarea except overflow.
.autogrow {
  overflow: auto !important;
}
```
Holen Sie sich dieses Ereignis-listener auf die textarea ist change Veranstaltung:
```
function growTextarea(e) {
  const { value } = e.target
  const textarea = e.target
  const { grower } = this

  grower.style.display = 'block'
  grower.innerHTML = value.length ? value : 'x'
  textarea.style.height = grower.offsetHeight + 'px'
  grower.style.display = 'none'
}
```
Wie funktioniert es? Im Grunde ein div, der die expansion ist das, was Sie wollen, dass die textarea die expansion zu Verhalten wie die. Also, du machst einen div mit der alle die gleichen Stile wie die textarea-Komponente und setzen Sie die textarea-Wert in den div. Dann bekommst du die div-Höhe und die textarea-Komponente die Höhe.

Mit display none und block, das div erscheint und verschwindet so Messen Sie seine Höhe. Du wirst nie sehen es eigentlich in den browser.

Hoffe, das funktioniert für Sie!

P. S. ich benutze Reagieren so musste ich meine Lösung für sein framework Agnostiker. So kann es Fehler oder einem syntax-Fehler. E. g. haben Sie vielleicht eine Abfrage des Dokuments finden Sie den Züchter div.

InformationsquelleAutor der Antwort A.Williams

Wenn Sie Angular2/4 es gibt eine große Richtlinie hierdass das funktioniert.

Finden Sie in der Themen-Liste für die beim laden von Daten dynamisch in die textarea für einen workaround. Andere als, dass Problem, es funktioniert gut mit ReactiveForms und Vorlage-Formulare.

Als Referenz, dies ist die Richtlinie code:

import { Input, AfterViewInit, ElementRef, HostListener, Directive} from '@angular/core';

@Directive({
    selector: 'textarea[autosize]'
})

export class Autosize implements AfterViewInit {

    private el: HTMLElement;
    private _minHeight: string;
    private _maxHeight: string;
    private _lastHeight: number;
    private _clientWidth: number;

    @Input('minHeight')
    get minHeight() { 
      return this._minHeight;
    }
    set minHeight(val: string) {
      this._minHeight = val;
      this.updateMinHeight();
    }

    @Input('maxHeight')
    get maxHeight() {
      return this._maxHeight; 
    }
    set maxHeight(val: string) {
      this._maxHeight = val;
      this.updateMaxHeight();
    }

 @HostListener('window:resize', ['$event.target'])
    onResize(textArea: HTMLTextAreaElement) {
      //Only apply adjustment if element width had changed.
      if (this.el.clientWidth === this._clientWidth) return;
      this._clientWidth = this.element.nativeElement.clientWidth;
      this.adjust();
    }

 @HostListener('input',['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();  
  }

  constructor(public element: ElementRef){
    this.el = element.nativeElement;
    this._clientWidth = this.el.clientWidth;
  }

  ngAfterViewInit(): void{
    //set element resize allowed manually by user
    const style = window.getComputedStyle(this.el, null);
    if (style.resize === 'both') {
            this.el.style.resize = 'horizontal';
        }
    else if (style.resize === 'vertical') {
            this.el.style.resize = 'none';
    }
    //run first adjust
    this.adjust();
  }

  adjust(): void{
    //perform height adjustments after input changes, if height is different
    if (this.el.style.height == this.element.nativeElement.scrollHeight + "px") return;
    this.el.style.overflowX = 'hidden';
    this.el.style.height = 'auto';
    this.el.style.height = this.el.scrollHeight + "px";
  }

  updateMinHeight(): void{
    //Set textarea min height if input defined
    this.el.style.minHeight = this._minHeight + 'px';
  }

  updateMaxHeight(): void{
    //Set textarea max height if input defined
    this.el.style.maxHeight = this._maxHeight + 'px';
  }

}

InformationsquelleAutor der Antwort rmcsharry

Alte Frage, aber Sie könnte 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);
        }
    });

Diese Weise die auto-resize für jede textarea die Klasse "text-Bereich". Auch schrumpft, wenn der text entfernt wird.