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

Die beste Lösung (funktioniert und ist kurz) ist für mich:

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    }); 

Es funktioniert ohne Blinzeln mit Einfügen (auch mit der Maus), Ausschneiden, Eingeben und es schrumpft auf die richtige Größe.

Schauen Sie sich bitte an jsFiddle .

Answer 2

Wenn Sie den IE8 nicht unterstützen müssen, können Sie die input Veranstaltung:

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

Jetzt müssen Sie nur noch etwas CSS hinzufügen und schon sind Sie fertig:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

Uso:

<textarea autoresize>Type here and I’ll resize.</textarea>

Sie können mehr darüber lesen, wie es funktioniert in meinem Blogbeitrag .

Answer 3

Sie verwenden den höheren Wert aus der aktuellen clientHeight und der content scrollHeight. Wenn Sie die scrollHeight verkleinern, indem Sie den Inhalt entfernen, kann der berechnete Bereich nicht kleiner werden, weil die clientHeight, die zuvor durch style.height festgelegt wurde, ihn offen hält. Sie könnten stattdessen ein max() von scrollHeight und einen Mindestwert für die Höhe nehmen, den Sie vordefiniert oder aus textarea.rows berechnet haben.

Im Allgemeinen sollten Sie sich wahrscheinlich nicht wirklich auf scrollHeight bei Formularsteuerelementen verlassen. Abgesehen davon, dass scrollHeight traditionell weniger unterstützt wird als einige der anderen IE-Erweiterungen, sagt HTML/CSS nichts darüber aus, wie Formularsteuerelemente intern implementiert sind, und es ist nicht garantiert, dass scrollHeight etwas Sinnvolles ist. (Traditionell haben einige Browser OS-Widgets für diese Aufgabe verwendet, was eine CSS- und DOM-Interaktion auf deren Interna unmöglich macht.) Prüfen Sie zumindest, ob scrollHeight/clientHeight vorhanden ist, bevor Sie versuchen, den Effekt zu aktivieren.

Ein anderer möglicher alternativer Ansatz, um das Problem zu vermeiden, wenn es wichtig ist, dass es auf breiterer Basis funktioniert, könnte ein verstecktes div sein, das die gleiche Breite wie das Textfeld hat und in der gleichen Schriftart gesetzt ist. Beim Hochfahren kopieren Sie den Text aus der Textarea in einen Textknoten im versteckten Div (denken Sie daran, ' \n ' mit einem Zeilenumbruch und '<'/'&' mit einem Escape-Effekt, wenn Sie innerHTML verwenden). Dann messen Sie einfach die div's offsetHeight wird Ihnen die Höhe, die Sie benötigen.

Answer 4

autosize

https://github.com/jackmoore/autosize

Just works, standalone, ist beliebt (3.0k+ GitHub-Sterne, Stand Oktober 2018), verfügbar auf cdnjs ) und leicht (~3,5k). Demo:

<textarea id="autosize" style="width:200px;">a
J   b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>

Übrigens, wenn Sie den ACE-Editor verwenden, benutzen Sie maxLines: Infinity : Automatische Anpassung der Höhe an den Inhalt im Ace Cloud 9 Editor

Answer 5

Ein anderer Ansatz ist die Verwendung einer <span> die ihre Größe automatisch anpasst. Sie müssen es editierbar machen, indem Sie die contenteditable="true" Eigentum und fertig:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

Das einzige Problem bei diesem Ansatz ist, dass Sie, wenn Sie den Wert als Teil des Formulars übermitteln wollen, dies selbst in JavaScript tun müssen. Das ist relativ einfach. Sie können zum Beispiel ein verstecktes Feld hinzufügen und in der onsubmit Ereignis des Formulars weisen den Wert des span in das verborgene Feld, das dann automatisch mit dem Formular übermittelt wird.