wake-up-neo.com

Erstellen eines Textbereichs mit automatischer Größenänderung

Es gab einen anderen Thread dazu , den ich ausprobiert habe. Es gibt jedoch ein Problem: Die textarea verkleinert sich nicht, wenn Sie den Inhalt löschen. Ich kann keine Möglichkeit finden, sie auf die richtige Größe zu verkleinern. Der Wert clientHeight wird als volle Größe der textarea und nicht als Inhalt zurückgegeben.

Der Code von dieser Seite ist unten:

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 )
    };
}
javascripthtmlresizeheighttextarea
290
DisgruntledGoat

Dies funktioniert für mich (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 möchten, probieren Sie es mit jsfiddle Es beginnt mit einer einzelnen Zeile und wächst nur so viel wie nötig. Für ein einzelnes textarea ist es in Ordnung, aber ich wollte etwas schreiben, wo ich viele, viele, viele textareas hätte (ungefähr so ​​viel wie man normalerweise Zeilen in einem großen Textdokument hätte). In diesem Fall ist es wirklich langsam. (In Firefox ist es wahnsinnig langsam.) Daher würde ich mir wirklich einen Ansatz wünschen, der reines CSS verwendet. Dies wäre mit contenteditable möglich, aber ich möchte, dass es nur Klartext ist.

184
panzi

EINE VOLLSTÄNDIGE EINFACHE LÖSUNG

Aktualisiert 07/05/2019 (Verbesserte Browser-Unterstützung für Handys und Tablets)

Der folgende Code funktioniert:

  • Bei Tasteneingabe.
  • Mit eingefügtem Text (Rechtsklick & Strg + V).
  • Mit ausgeschnittenem Text (Rechtsklick & Strg + x).
  • Mit vorinstalliertem Text.
  • Mit allen Textbereichen (mehrzeiligen Textfeldern) für die gesamte Site.
  • Mit Firefox (v31-67 getestet).
  • Mit Chrome (v37-74 getestet).
  • Mit IE (v9-v11 getestet).
  • Mit Edge (v14-v18 getestet).
  • Mit IOS Safari .
  • Mit Android Browser .
  • Mit JavaScript strenger Modus .
  • Ist w3c validiert?.
  • Und ist rationalisiert und effizient.

OPTION 1 (mit jQuery)

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

Einfach (Fügen Sie diesen JQuery-Code zu Ihrer Master-Skript-Datei hinzu und vergessen Sie ihn.) 

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

Test on jsfiddle

OPTION 2 (reines JavaScript)

Einfach (Fügen Sie dieses JavaScript zu Ihrer Master-Skript-Datei hinzu und vergessen Sie es.) 

var tx = document.getElementsByTagName('textarea');
for (var 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 = 'auto';
  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>

Test on jsfiddle

OPTION 3 (jQuery-Erweiterung)

Nützlich, wenn Sie die Textbereiche, deren Größe automatisch angepasst werden soll, weiter verketten möchten.

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

Mit $('textarea').autoHeight() aufrufen

AKTUALISIERUNG VON TEXTAREA VIA JAVASCRIPT

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

$('textarea').trigger('input');
279
DreamTeK

jQuery-Lösung Passen Sie die CSS an Ihre Anforderungen an

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 eine Geige mit dem absoluten Minimum-Styling als Ausgangspunkt für Ihre Experimente erstellt ... http://jsfiddle.net/53eAy/951/

61
chim
<!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 am besten zu Ihnen passt.

Sie könnten auf die style- und script-Tags verzichten, aber imho wird dies ein bisschen chaotisch (dies ist alter HTML + JS und wird nicht empfohlen).

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

Edit: modernisierter Code. Das onkeyup-Attribut wurde in addEventListener geändert.
Bearbeiten: Keydown funktioniert besser als Keyup
Bearbeiten: Funktion vor der Verwendung deklarieren
Edit: Eingabe funktioniert besser als Keydown (thnx @ WASD42 & @ MA-Maddin)

jsfiddle

28
GijsjanB

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 wie ein Zauber, ohne mit Paste (auch mit der Maus) zu blinken.

Bitte schauen Sie unter jsFiddle nach.

24
vatavale

Sie verwenden den höheren Wert des aktuellen clientHeight und des Inhalts scrollHeight. Wenn Sie scrollHeight durch Entfernen von Inhalt verkleinern, kann der berechnete Bereich nicht kleiner werden, da der zuvor von style.height festgelegte clientHeight ihn offen hält. Sie können stattdessen einen maximalen Wert () von scrollHeight und einen von Ihnen vordefinierten oder aus textarea.rows berechneten Mindestwert verwenden.

Im Allgemeinen sollten Sie sich bei Formularsteuerelementen wahrscheinlich nicht wirklich auf scrollHeight verlassen. Abgesehen davon, dass scrollHeight traditionell weniger breit unterstützt wird als einige andere IE -Erweiterungen, sagt HTML/CSS nichts darüber aus, wie Formularsteuerelemente intern implementiert werden, und es ist nicht garantiert, dass scrollHeight etwas Sinnvolles ist. (Normalerweise haben einige Browser OS-Widgets für diese Aufgabe verwendet, wodurch die Interaktion von CSS und DOM in ihren internen Daten nicht möglich ist.) Spüren Sie mindestens die Existenz von scrollHeight/clientHeight auf, bevor Sie versuchen, den Effekt zu aktivieren.

Ein anderer möglicher alternativer Ansatz, um das Problem zu vermeiden, wenn es wichtig ist, dass es breiter funktioniert, könnte es sein, ein ausgeblendetes Div zu verwenden, das die gleiche Breite hat wie der Textbereich und die gleiche Schriftart. Beim Keyup kopieren Sie den Text aus dem Textbereich in einen Textknoten im ausgeblendeten div (denken Sie daran, '\ n' durch einen Zeilenumbruch zu ersetzen und '<'/'&' korrekt zu fluchten, wenn Sie innerHTML verwenden). Dann messen Sie einfach die Offsethöhe von div. Die Höhe gibt Ihnen die Höhe, die Sie benötigen.

16
bobince

Wenn Sie IE8 nicht unterstützen müssen, können Sie das Ereignis input verwenden:

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 CSS hinzufügen und sind fertig:

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

Verwendungszweck:

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

Sie können mehr darüber erfahren, wie es funktioniert in meinem Blogpost.

14
Maximilian Hoffmann

automatische Größenanpassung

https://github.com/jackmoore/autosize

Just Works, Standalone, ist beliebt (3,0k + GitHub-Stars ab Oktober 2018), verfügbar auf cdnjs und leichtgewichtig (~ 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, verwenden Sie maxLines: Infinity: Höhe automatisch an Inhalt im Ace Cloud 9-Editor anpassen

11
Ciro Santilli 新疆改造中心 六四事件 法轮功

Hat jemand für inhaltbar gehalten? Kein Durcheinander mit Scrollen, und die einzige JS, die ich daran mag, ist, wenn Sie die Daten auf Unschärfe speichern möchten ... und anscheinend ist sie mit allen gängigen Browsern kompatibel: http://caniuse.com/ # feat = contenteditable

Gestalten Sie es einfach so, dass es wie ein Textfeld aussieht, und es wird automatisch in die Größe geändert. Legen Sie die Mindesthöhe auf die gewünschte Texthöhe fest.

Das Coole an diesem Ansatz ist, dass Sie in einigen Browsern Speichern und Tags verwenden können.

http://jsfiddle.net/gbutiri/v31o8xfo/

<style>
.autoheight {
    min-height: 16px;
    font-size: 16px;
    margin: 0;
    padding: 10px;
    font-family: Arial;
    line-height: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    resize: none;
    border: 1px solid #ccc;
    outline: none;
    width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
    var $this = $(this);
    // The text is here. Do whatever you want with it.
    console.log($this.html());
});

</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>
6
Webmaster G

Ich habe den folgenden Code für mehrere Textbereiche verwendet. Funktioniert gut in Chrome 12, Firefox 5 und IE 9, auch mit Aktionen zum Löschen, Ausschneiden und Einfügen in den Textbereichen.

<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>
<script type='text/javascript'>
function attachAutoResizeEvents()
{   for(i=1;i<=4;i++)
    {   var txtX=document.getElementById('txt'+i)
        var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
        txtX.onchange=new Function("resize(this,"+minH+")")
        txtX.onkeyup=new Function("resize(this,"+minH+")")
        txtX.onchange(txtX,minH)
    }
}
function resize(txtX,minH)
{   txtX.style.height = 'auto' // required when delete, cut or paste is performed
    txtX.style.height = txtX.scrollHeight+'px'
    if(txtX.scrollHeight<=minH)
        txtX.style.height = minH+'px'
}
window.onload=attachAutoResizeEvents
</script>
4
Nikunj Bhatt

Es gibt einen etwas anderen Ansatz.

<div style="position: relative">
  <pre style="white-space: pre-wrap; Word-wrap: break-Word"></pre>
  <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

Die Idee ist, den Text von textarea in die pre zu kopieren, damit CSS sicherstellen kann, dass sie dieselbe Größe haben.

Der Vorteil ist, dass Frameworks einfache Werkzeuge zum Verschieben von Text bieten, ohne dass Ereignisse berührt werden. In AngularJS würden Sie nämlich einen ng-model="foo" ng-trim="false" zur textarea und ng-bind="foo + '\n'" zur pre hinzufügen. Siehe eine Geige .

Stellen Sie einfach sicher, dass pre dieselbe Schriftgröße wie textarea hat.

4
Karolis Juodelė

Als anderer Ansatz können Sie einen <span> verwenden, der seine Größe automatisch anpasst. Sie müssen es durch Hinzufügen der contenteditable="true"-Eigenschaft bearbeitbar machen, und Sie sind 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 übergeben möchten, dies in JavaScript selbst tun müssen. Das ist relativ einfach. Sie können beispielsweise ein ausgeblendetes Feld hinzufügen und im onsubmit-Ereignis des Formulars den Wert der span dem ausgeblendeten Feld zuweisen, das dann automatisch mit dem Formular übermittelt wird.

4
Racil Hilan

Das folgende Verfahren funktioniert beim Ausschneiden, Einfügen usw., unabhängig davon, ob diese Aktionen mit der Maus ausgeführt werden, eine Tastenkombination, das Auswählen einer Option aus einer Menüleiste ... Mehrere Antworten verwenden einen ähnlichen Ansatz, aber sie berücksichtigen nicht die Box- Größenanpassung, weshalb sie den Stil overflow: hidden falsch anwenden.

Ich mache folgendes, was auch gut mit max-height und rows für minimale und maximale Höhe funktioniert.

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));
textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}
<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>

Der Vollständigkeit halber sollten Sie in einigen weiteren Fällen die Funktion adjust aufrufen:

  1. Fenster ändern die Größe von Ereignissen, wenn sich die Breite der textarea mit der Fenstergröße oder anderen Ereignissen ändert, die die Breite des Textbereichs ändern
  2. Wenn sich das textarea-Stilattribut der Variable display ändert, z. wenn es von none (ausgeblendet) zu block geht
  3. Wenn der Wert von textarea programmgesteuert geändert wird

Beachten Sie, dass die Verwendung von window.getComputedStyle oder das Abrufen von currentStyle etwas rechenintensiv sein kann. Daher möchten Sie möglicherweise das Ergebnis zwischenspeichern.

Funktioniert für IE6, also hoffe ich, dass die Unterstützung gut genug ist.

4
Joseph Nields

Sie können JQuery verwenden, um die Variable textarea während der Eingabe zu erweitern:

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name="note"></textarea>
<div>

2
Mauricio Sánchez

Ich weiß nicht, ob jemand dies erwähnt, aber in einigen Fällen ist es möglich, die Höhe mit Zeilenattributen zu ändern

textarea.setAttribute('rows',breaks);

Demo

2
h0mayun

Hier ist eine eckige Anweisung für Panzis Antwort.

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model="foo" auto-height></textarea>
2
chrmcpn

Ich kenne eine kurze und korrekte Art, dies mit jquery zu implementieren. Es ist kein zusätzliches verstecktes div erforderlich und funktioniert in den meisten Browsern

<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>
2
user1432124

Ein bisschen Korrekturen. Funktioniert perfekt in Opera

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });
2
artnik-pro

Noch einfacher und sauberer ist dies: 

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// und das CSS

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    Word-wrap:break-Word
}

Sie müssen lediglich die .auto-height-Klasse zu einer beliebigen textarea hinzufügen, die Sie als Ziel festlegen möchten.

Getestet in FF, Chrome und Safari. Lassen Sie mich wissen, wenn dies für Sie aus irgendeinem Grund nicht funktioniert. Dies ist jedoch die sauberste und einfachste Methode, die ich gefunden habe. Und es funktioniert super! : D

1
revive

meine Implementierung ist sehr einfach. Zählen Sie die Anzahl der Zeilen in der Eingabe (und mindestens 2 Zeilen, um zu zeigen, dass es sich um ein Textfeld handelt):

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

voll funktionsfähiges Beispiel mit Stimulus: https://jsbin.com/kajosolini/1/edit?html,js,output

(und dies funktioniert zum Beispiel mit dem manuellen Resize-Handle des Browsers)

1
localhostdotdev

Diejenigen, die dasselbe in neuen Versionen von Angular erreichen wollen.

Greifen Sie nach textArea elementRef.

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup)="autoGrow()" #textArea></textarea>

Ich füge auch einen weiteren Anwendungsfall hinzu, der einigen Benutzern beim Lesen des Threads nützlich sein kann. Wenn Benutzer die Höhe des Textbereichs auf eine bestimmte Höhe erhöhen und dann overflow:scroll darauf haben möchten, kann die obige Methode erweitert werden, um den genannten Anwendungsfall zu erreichen .

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }
1
Divyanshu Rawat

Dieser Code funktioniert zum Einfügen und zum Löschen.

onKeyPressTextMessage = function(){
                        var textArea = event.currentTarget;
        textArea.style.height = 'auto';
        textArea.style.height = textArea.scrollHeight + 'px';
};
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>

Hier ist die JSFiddle

1
Kurenai Kunai

Einige der Antworten hier berücksichtigen nicht das Auffüllen.

Angenommen, Sie haben eine MaxHöhe, die Sie nicht überschreiten möchten, hat dies für mich funktioniert:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);
1
hasen

Verwenden Sie einfach <pre> </pre> mit einigen Stilen wie:

    pre {
        font-family: Arial, Helvetica, sans-serif;
        white-space: pre-wrap;
        Word-wrap: break-Word;
        font-size: 12px;
        line-height: 16px;
    }
1
Liber

Der beste Weg, den ich gefunden habe:

$("textarea.auto-grow").each( function(){
    $(this).keyup(function(){
        $(this).height( $(this)[0].scrollHeight - Number( $(this).css("font-size").replace("px", "") ) );
    });
});

Andere Möglichkeiten haben einen Fehler in Schriftgröße.

Deshalb ist das das Beste.

0
Karl Zillner

Folgendes habe ich beim Verwenden von MVC HTML Helper für TextArea gemacht. Ich hatte einige Textarea-Elemente und musste sie anhand der Modell-ID unterscheiden.

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

und im Skript hinzugefügt: 

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

Ich habe es auf IE10 und Firefox23 getestet

0
gunnerz

Keine der Antworten scheint zu funktionieren. Aber das funktioniert für mich: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

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

Sie können diesen Code verwenden:

Coffescript: 

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

Javascript 

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();
0
Darex1991

Mit diesem Code können Sie die Anzahl der Zeilen berechnen, die ein Textfeld benötigt:

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Berechnen Sie es für input- und window:resize -Ereignisse, um den Effekt der automatischen Größenänderung zu erhalten. Beispiel in Angular:

Vorlagencode:

<textarea rows="1" reAutoWrap></textarea>

auto-wrap.directive.ts

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

@Directive({
  selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener('input') onInput() {
    this.resize();
  }

  @HostListener('window:resize') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}
0
André

Für alle, die eine automatische Größenänderung des Textbereichs für Breite und Höhe wünschen:

HTML:

<textarea class='textbox'></textarea>
<div>
  <span class='tmp_textbox'></span>
</div>

CSS:

.textbox,
.tmp_textbox {
  font-family: 'Arial';
  font-size: 12px;
  resize: none;
  overflow:hidden;
}

.tmp_textbox {
  display: none;
}

jQuery:

$(function(){
  //alert($('.textbox').css('padding'))
  $('.textbox').on('keyup change', checkSize)
  $('.textbox').trigger('keyup')

  function checkSize(){
    var str = $(this).val().replace(/\r?\n/g, '<br/>');
    $('.tmp_textbox').html( str )
    console.log($(this).val())

    var strArr = str.split('<br/>')
    var row = strArr.length
    $('.textbox').attr('rows', row)
    $('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
  }
})

Codepen:

http://codepen.io/anon/pen/yNpvJJ

Prost,

0
Goon Nguyen

Die jQuery-Lösung besteht darin, die Höhe des Textbereichs auf "auto" zu setzen, die scrollHeight-Einstellung zu überprüfen und dann die Höhe des Textbereichs anzupassen, sobald sich ein Textbereich ändert ( JSFiddle ):

$('textarea').on( 'input', function(){
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Wenn Sie Textbereiche dynamisch hinzufügen (über AJAX oder was auch immer), können Sie dies in Ihrem $ (document) .ready hinzufügen, um sicherzustellen, dass alle Textbereiche mit der Klasse 'autoheight' auf der gleichen Höhe wie ihr Inhalt stehen:

$(document).on( 'input', 'textarea.autoheight', function() {
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Getestet und arbeitet in Chrome, Firefox, Opera und IE. Unterstützt auch Ausschneiden und Einfügen, lange Wörter usw.

0
patrick

Native Javascript-Lösung ohne flackern in Firefox und schneller als Methode withclientHeight ... 

1) Fügen Sie div.textarea selector allen Ihren Selektoren hinzu, die textarea enthalten. Vergessen Sie nicht, box-sizing: border-box; hinzuzufügen. 

2) Fügen Sie dieses Skript hinzu:

function resizeAll()
{
   var textarea=document.querySelectorAll('textarea');
   for(var i=textarea.length-1; i>=0; i--)
      resize(textarea[i]);
}

function resize(textarea)
{
   var div = document.createElement("div");
   div.setAttribute("class","textarea");
   div.innerText=textarea.value+"\r\n";
   div.setAttribute("style","width:"+textarea.offsetWidth+'px;display:block;height:auto;left:0px;top:0px;position:fixed;z-index:-200;visibility:hidden;Word-wrap:break-Word;overflow:hidden;');
   textarea.form.appendChild(div);
   var h=div.offsetHeight;
   div.parentNode.removeChild(div);
   textarea.style.height=h+'px';
}

function resizeOnInput(e)
{
   var textarea=document.querySelectorAll('textarea');
   for(var i=textarea.length-1; i>=0; i--)
      textarea[i].addEventListener("input",function(e){resize(e.target); return false;},false);
}

window.addEventListener("resize",function(){resizeAll();}, false);
window.addEventListener("load",function(){resizeAll();}, false);
resizeOnInput();

Getestet an IE11, Firefox und Chrome.

Diese Lösung erstellt ein div, das Ihrem Textbereich ähnlich ist, einschließlich internem Text und Maßhöhe. 

0
18C

MakeTextAreaResisable, das qQuery verwendet

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}
0
Igor Krupitsky