Erstellen einer Textarea mit automatischer Größenänderung

Question

Es gab ein anderer Thread zu diesem Thema die ich ausprobiert habe. Aber es gibt ein Problem: die textarea schrumpft nicht, wenn Sie den Inhalt löschen. Ich kann keine Möglichkeit finden, sie auf die richtige Größe zu verkleinern - die clientHeight Wert wird als die volle Größe des textarea , nicht sein Inhalt.

Der Code dieser Seite ist unten zu sehen:

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

Answer 1

EINE VOLLSTÄNDIGE UND DOCH EINFACHE LÖSUNG

Aktualisiert 2022-08-30 (Unterstützung für einzeilige Mehrfach-Textfelder als Standard hinzugefügt)

Der folgende Code wird funktionieren:

• Bei Tasteneingabe.
• Mit eingefügtem Text (Rechtsklick & ctrl+v).
• Mit ausgeschnittenem Text (Rechtsklick & ctrl+x).
• Mit vorinstalliertem Text.
• Bei allen Textarea's (mehrzeilige Textfelder) standortübergreifend.
• Mit Firefox (v31-67 getestet).
• Mit Chrom (v37-74 getestet).
• Mit IE (v9-v11 getestet).
• Mit Kante (v14-v18 getestet).
• Mit IOS Safari .
• Mit Android-Browser .
• Mit JavaScript strenger Modus .
• Ist w3c validiert.
• Und ist stromlinienförmig und effizient.

---

OPTION 1 (Mit jQuery)

Diese Option erfordert jQuery und wurde getestet und funktioniert mit 1.7.2 - 3.6

Einfach (Fügen Sie diesen Jquery-Code in Ihre Master-Skriptdatei ein und vergessen Sie ihn).

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
  this.style.height = 0;
  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>

<a href="http://jsfiddle.net/n9uuv0hd/54/" rel="noreferrer">Test on jsfiddle</a>

---

OPTION 2 (Reines JavaScript)

Einfach (Fügen Sie dieses JavaScript in Ihre Master-Skriptdatei ein und vergessen Sie es).

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 = 0;
  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>

<a href="http://jsfiddle.net/n9uuv0hd/80/" rel="noreferrer">Test on jsfiddle</a>

---

OPTION 3 (jQuery-Erweiterung)

Nützlich, wenn Sie weitere Verkettungen auf die Textbereiche anwenden möchten, deren Größe automatisch angepasst werden soll.

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

Aufrufen mit $("textarea").autoHeight()

---

AKTUALISIERUNG DER TEXTAREA ÜBER JAVASCRIPT

Wenn Sie Inhalte über JavaScript in ein Textfeld einfügen, fügen Sie den folgenden Code ein, um die Funktion in Option 1 aufzurufen.

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

---

VOREINGESTELLTE TEXTAREA-HÖHE

Um die Anfangshöhe der Textarea festzulegen, müssen Sie eine zusätzliche Bedingung hinzufügen:

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 = 0;
  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>

Answer 2

Das funktioniert bei mir (Firefox 3.6/4.0 und Chrome 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>

Wenn Sie es ausprobieren möchten jsfiddle Sie beginnt mit einer einzigen Zeile und wächst nur so weit wie nötig. Es ist in Ordnung für eine einzelne textarea aber ich wollte etwas schreiben, wo ich viele, viele, viele solcher textarea s (etwa so viel, wie man normalerweise Zeilen in einem großen Textdokument hat). In diesem Fall ist es wirklich langsam. (In Firefox ist es wahnsinnig langsam.) Ich möchte also wirklich einen Ansatz, der reines CSS verwendet. Dies wäre möglich mit contenteditable aber ich möchte, dass es nur Klartext ist.

Answer 3

JQuery-Lösung das css an Ihre Anforderungen anpassen

css...

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 */
}

javascript...

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

ODER Alternative für jQuery 1.7+...

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

Ich habe ein Fiddle mit dem absoluten Minimum an Styling als Ausgangspunkt für Ihre Experimente erstellt... http://jsfiddle.net/53eAy/951/

Answer 4

Ich habe einen One-Liner aus aquí ;

<textarea name="text" oninput="this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>

Answer 5

<!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>

Getestet in Firefox 14 und Chromium 18. Die Zahlen 24 und 12 sind willkürlich, testen Sie, was Ihnen am besten passt.

Man könnte auf die Style- und Script-Tags verzichten, aber das wird imho ein bisschen unübersichtlich (das ist HTML+JS im alten Stil und wird nicht empfohlen).

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

Bearbeiten: Code modernisiert. Geändertes onkeyup-Attribut zu addEventListener.
Edit: keydown funktioniert besser als keyup
Bearbeiten: Funktion vor der Verwendung deklarieren
Edit: Eingabe funktioniert besser als Tastendruck (danke @WASD42 & @MA-Maddin)

jsfiddle