Wie kann ein Textbereich mithilfe von Prototype automatisch angepasst werden?

121

Ich arbeite derzeit an einer internen Vertriebsanwendung für das Unternehmen, für das ich arbeite, und ich habe ein Formular, mit dem der Benutzer die Lieferadresse ändern kann.

Jetzt denke ich, dass es viel schöner aussehen würde, wenn der Textbereich, den ich für die Hauptadressdetails verwende, nur den Bereich des darin enthaltenen Textes einnimmt und die Größe automatisch ändert, wenn der Text geändert wird.

Hier ist ein Screenshot davon.

ISO-Adresse

Irgendwelche Ideen?

@ Chris

Ein guter Punkt, aber es gibt Gründe, warum ich möchte, dass die Größe geändert wird. Ich möchte, dass der Bereich, den es einnimmt, der Bereich der darin enthaltenen Informationen ist. Wie Sie im Screenshot sehen können, nimmt ein fester Textbereich, wenn ich einen festen Textbereich habe, ziemlich viel vertikalen Raum ein.

Ich kann die Schriftart reduzieren, aber die Adresse muss groß und lesbar sein. Jetzt kann ich den Textbereich verkleinern, aber dann habe ich Probleme mit Leuten, die eine Adresszeile haben, die 3 oder 4 (eine nimmt 5) Zeilen dauert. Die Notwendigkeit, dass der Benutzer eine Bildlaufleiste verwendet, ist ein wichtiges Nein-Nein.

Ich denke, ich sollte etwas genauer sein. Ich bin nach vertikaler Größenänderung und die Breite ist nicht so wichtig. Das einzige Problem, das dabei auftritt, ist, dass die ISO-Nummer (die große "1") unter die Adresse verschoben wird, wenn die Fensterbreite zu klein ist (wie Sie auf dem Screenshot sehen können).

Es geht nicht darum, eine Spielerei zu haben; Es geht darum, ein Textfeld zu haben, das der Benutzer bearbeiten kann und das nicht unnötig Platz beansprucht, sondern den gesamten Text darin anzeigt.

Wenn jemand einen anderen Weg findet, um das Problem anzugehen, bin ich auch dafür offen.

Ich habe den Code ein wenig geändert, weil er etwas seltsam war. Ich habe es geändert, um es beim Keyup zu aktivieren, da es das gerade eingegebene Zeichen nicht berücksichtigt.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

— Mike
quelle

Können Sie eine Demo-Site erstellen, auf der wir dies bei der Arbeit sehen können?

— Einar Ólafsson

3

Dieses Plugin scheint gut zu sein jacklmoore.com/autosize

— Gaurav Shah

Gibt es eine JQuery-Version? Wie greife ich in JQuery auf Spalten und Zeilen einer TextArea zu?

— Zach

Fast das gleiche, aber mit ausdrücklicher Anforderung, die kleiner werden sollte, wenn Text entfernt wird: stackoverflow.com/questions/454202/…

— Ciro Santilli 法轮功冠状病六四事件法轮功

75

Facebook tut dies, wenn Sie an die Wände von Personen schreiben, die Größe jedoch nur vertikal ändern.

Die horizontale Größenänderung scheint mir aufgrund von Zeilenumbrüchen, langen Zeilen usw. ein Chaos zu sein, aber die vertikale Größenänderung scheint ziemlich sicher und nett zu sein.

Keiner der Facebook-Neulinge, die ich kenne, hat jemals etwas darüber erwähnt oder war verwirrt. Ich würde dies als anekdotischen Beweis verwenden, um zu sagen: "Mach weiter, implementiere es".

Dazu JavaScript-Code mit Prototype (weil ich damit vertraut bin):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>

    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>

        <script type="text/javascript" language="javascript">
            resizeIt = function() {
              var str = $('text-area').value;
              var cols = $('text-area').cols;

              var linecount = 0;
              $A(str.split("\n")).each( function(l) {
                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
              })
              $('text-area').rows = linecount + 1;
            };

            // You could attach to keyUp, etc. if keydown doesn't work
            Event.observe('text-area', 'keydown', resizeIt );

            resizeIt(); //Initial on load
        </script>
    </body>
</html>

PS: Offensichtlich ist dieser JavaScript-Code sehr naiv und nicht gut getestet, und Sie möchten ihn wahrscheinlich nicht für Textfelder mit Romanen verwenden, aber Sie haben eine allgemeine Vorstellung davon.

— Orion Edwards
quelle

2

Dies setzt voraus, dass der Browser bei jedem Zeichen kaputt geht, was falsch ist. Probier es an <textarea cols='5'>0 12345 12345 0</textarea>. (Ich habe eine nahezu identische Implementierung geschrieben und diese erst nach einem Monat der Verwendung abgefangen.) Auch bei Leerzeilen schlägt dies fehl.

— St-Boost

Gibt es dafür eine JQuery-Version?

— Smaragdhieu

Der Backslash in $ A (str.split ("\ n")) benötigt einen anderen. (Meine Bearbeitung der obigen Antwort hat aus irgendeinem Grund nicht überlebt.)

— gherson

67

Eine Verfeinerung einiger dieser Antworten besteht darin, CSS mehr von der Arbeit machen zu lassen.

Die Grundroute scheint zu sein:

Erstellen Sie ein Containerelement für das textarea und ein verstecktesdiv
Halten Sie den textareaInhalt von Javascript mit dem synchronisiertdiv 's
Lassen Sie den Browser die Höhe dieses Div berechnen
Da der Browser das Rendern / Ändern der Größe des Versteckten übernimmt div, vermeiden wir das explizite Festlegen der textareaHöhe.

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')
}

html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}

<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

Erweitern Sie das Snippet

— Jan Miksovsky
quelle

5

Dies ist eine großartige Lösung! Die einzige Einschränkung besteht darin, dass Browser, die keine Box-Größe unterstützen (IE <7), die Breite nicht richtig berechnen und daher an Genauigkeit verlieren. Wenn Sie jedoch am Ende den Platz einer Zeile belassen, Du solltest immer noch in Ordnung sein. Ich liebe es auf jeden Fall für die Einfachheit.

— Antonio Salazar Cardozo

4

Ich habe mir die Freiheit genommen, diese Lösung als eigenständiges, einfach zu verwendendes jQuery-Plugin zu implementieren, ohne dass Markups oder Styling erforderlich sind. xion.io/jQuery.xarea für den Fall, dass jemand es benutzen könnte :)

— Xion

2

Wenn Sie textCopy auf versteckt setzen, kann das versteckte Div immer noch Platz im Markup einnehmen. Wenn der Inhalt von textCopy größer wird, erhalten Sie schließlich eine Bildlaufleiste über die gesamte Länge Ihrer Seite ...

— topwik

1

Noch eine nette Änderung daran; var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' ';stellt sicher, dass Sie kein ruckeliges Verhalten bekommen, wenn Sie von einer leeren neuen Zeile am Ende des Textbereichs zu einer nicht leeren wechseln, da das versteckte div sicherstellt, dass es in den nbsp umbrochen wird.

— unwissentlich

1

@unwitting toller Aufruf zum Hinzufügen eines '& nbsp;' Um diese plötzliche Vergrößerung zu vermeiden, wenn Sie den ersten Buchstaben in eine neue Zeile einfügen - für mich ist er ohne diesen Fehler gebrochen - sollte dies der Antwort hinzugefügt werden!

— Davnicwil

40

Hier ist eine andere Technik zum automatischen Ändern eines Textbereichs.

Verwendet Pixelhöhe anstelle von Zeilenhöhe: Genauere Behandlung des Zeilenumbruchs, wenn eine proportionale Schriftart verwendet wird.
Akzeptiert entweder ID oder Element als Eingabe
Akzeptiert einen optionalen Parameter für die maximale Höhe - nützlich, wenn Sie den Textbereich lieber nicht über eine bestimmte Größe hinaus wachsen lassen möchten (lassen Sie alles auf dem Bildschirm, vermeiden Sie das Brechen des Layouts usw.)
Getestet mit Firefox 3 und Internet Explorer 6

Code: (einfaches Vanille-JavaScript)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if (!text)
      return;

   /* Accounts for rows being deleted, pixel value may need adjusting */
   if (text.clientHeight == text.scrollHeight) {
      text.style.height = "30px";
   }

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

Demo: (verwendet jQuery, Ziele in dem Textbereich, in den ich gerade tippe - wenn Sie Firebug installiert haben, fügen Sie beide Beispiele in die Konsole ein und testen Sie auf dieser Seite)

$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});

— Shog9
quelle

@ SMB - das wäre wahrscheinlich nicht zu schwer zu implementieren, fügen Sie einfach eine weitere Bedingung hinzu

— Jason

@Jason: Wenn der Text im Feld ihn nicht ausfüllt clientHeightund scrollHeightgleich ist, können Sie diese Methode nicht verwenden, wenn Ihr Textbereich sowohl verkleinert als auch vergrößert werden soll.

— Brant Bobby

Um es einfach zu verkleinern, müssen Sie nur diesen Code vor Zeile 6 hinzufügen:if (text.clientHeight == text.scrollHeight) text.style.height = "20px";

— Gapipro

14

Wahrscheinlich die kürzeste Lösung:

jQuery(document).ready(function(){
    jQuery("#textArea").on("keydown keyup", function(){
        this.style.height = "1px";
        this.style.height = (this.scrollHeight) + "px"; 
    });
});

Auf diese Weise brauchen Sie keine versteckten Divs oder ähnliches.

Hinweis: this.style.height = (this.scrollHeight) + "px";Je nachdem, wie Sie den Textbereich gestalten (Zeilenhöhe, Polsterung und dergleichen), müssen Sie möglicherweise damit spielen .

— Eduard Luca
quelle

Die beste Lösung, wenn Sie nichts dagegen haben, dass die Bildlaufleiste blinkt.

— Cfillol

Es würde ausreichen, nur das Keyup-Ereignis abzufangen. Glaubst du nicht?

— Cfillol

2

Setzen Sie die Eigenschaft Textarea overflow auf "versteckt", um ein Blinken der Bildlaufleiste zu vermeiden.

— Cfillol

keyupkönnte genug sein, aber ich bin nicht sicher. Ich war so glücklich, dass ich es herausgefunden habe, dass ich aufgehört habe, etwas anderes auszuprobieren.

— Eduard Luca

Ich versuche immer noch zu erfahren, warum Sie this.style.height = "1px" hinzugefügt haben. oder this.style.height = "auto"; Vor. Ich weiß, dass die Größe des Textbereichs nicht geändert wird, wenn wir den Inhalt entfernen, wenn wir diese Zeile nicht hinzufügen. Kann jemand erklären?

— Balasubramani M

8

Hier ist eine Prototypversion der Größenänderung eines Textbereichs, die nicht von der Anzahl der Spalten im Textbereich abhängt. Dies ist eine überlegene Technik, da Sie damit den Textbereich über CSS steuern und über einen Textbereich mit variabler Breite verfügen können. Zusätzlich zeigt diese Version die Anzahl der verbleibenden Zeichen an. Obwohl nicht angefordert, ist es eine ziemlich nützliche Funktion und kann leicht entfernt werden, wenn sie unerwünscht ist.

//inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options)
  {
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function()
  { 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters ' + (remaining > 0 ? 'remaining' : 'over the limit'));
  }
});

Erstellen Sie das Widget durch Aufrufen new Widget.Textarea('element_id'). Die Standardoptionen können überschrieben werden, indem sie als Objekt übergeben werden, z new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Wenn Sie es für alle Textbereiche auf der Seite erstellen möchten, gehen Sie wie folgt vor:

Event.observe(window, 'load', function() {
  $$('textarea').each(function(textarea) {
    new Widget.Textarea(textarea);
  });   
});

— Jeremy Kauffman
quelle

7

Hier ist eine Lösung mit JQuery:

$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})

abcist ein teaxtarea.

— memisch
quelle

5

Überprüfen Sie den folgenden Link: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

$(document).ready(function () {
    $('.ExpandableTextCSS').autoResize({
        // On resize:
        onResize: function () {
            $(this).css({ opacity: 0.8 });
        },
        // After resize:
        animateCallback: function () {
            $(this).css({ opacity: 1 });
        },
        // Quite slow animation:
        animateDuration: 300,
        // More extra space:
        extraSpace:20,
        //Textarea height limit
        limit:10
    });
});

— Gyan
quelle

Toter Link. Code ist hier james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/…

— Matthew Hui

3

Wenn ich das noch einmal betrachte, habe ich es ein bisschen aufgeräumter gemacht (obwohl jemand, der mit Prototype / JavaScript voll ist , Verbesserungen vorschlagen könnte?).

var TextAreaResize = Class.create();
TextAreaResize.prototype = {
  initialize: function(element, options) {
    element = $(element);
    this.element = element;

    this.options = Object.extend(
      {},
      options || {});

    Event.observe(this.element, 'keyup',
      this.onKeyUp.bindAsEventListener(this));
    this.onKeyUp();
  },

  onKeyUp: function() {
    // We need this variable because "this" changes in the scope of the
    // function below.
    var cols = this.element.cols;

    var linecount = 0;
    $A(this.element.value.split("\n")).each(function(l) {
      // We take long lines into account via the cols divide.
      linecount += 1 + Math.floor(l.length / cols);
    })

    this.element.rows = linecount;
  }
}

Einfach anrufen mit:

new TextAreaResize('textarea_id_name_here');

— Mike
quelle

3

Ich habe etwas ganz einfaches gemacht. Zuerst habe ich die TextArea in einen DIV gelegt. Zweitens habe ich die readyFunktion für dieses Skript aufgerufen .

<div id="divTable">
  <textarea ID="txt" Rows="1" TextMode="MultiLine" />
</div>

$(document).ready(function () {
  var heightTextArea = $('#txt').height();
  var divTable = document.getElementById('divTable');
  $('#txt').attr('rows', parseInt(parseInt(divTable .style.height) / parseInt(altoFila)));
});

Einfach. Dies ist die maximale Höhe des Div nach dem Rendern, geteilt durch die Höhe einer TextArea einer Zeile.

— Eduardo Mass
quelle

2

Ich brauchte diese Funktion für mich selbst, aber keiner von hier funktionierte so, wie ich sie brauchte.

Also habe ich Orions Code verwendet und ihn geändert.

Ich habe eine Mindesthöhe hinzugefügt, damit es bei der Zerstörung nicht zu klein wird.

function resizeIt( id, maxHeight, minHeight ) {
    var text = id && id.style ? id : document.getElementById(id);
    var str = text.value;
    var cols = text.cols;
    var linecount = 0;
    var arStr = str.split( "\n" );
    $(arStr).each(function(s) {
        linecount = linecount + 1 + Math.floor(arStr[s].length / cols); // take into account long lines
    });
    linecount++;
    linecount = Math.max(minHeight, linecount);
    linecount = Math.min(maxHeight, linecount);
    text.rows = linecount;
};

— Peter Mortensen
quelle

2

Wie die Antwort von @memical.

Ich habe jedoch einige Verbesserungen gefunden. Sie können die jQuery- height()Funktion verwenden. Beachten Sie jedoch die Pixel oben und unten. Andernfalls wächst Ihr Textbereich zu schnell.

$(document).ready(function() {
  $textarea = $("#my-textarea");

  // There is some diff between scrollheight and height:
  //    padding-top and padding-bottom
  var diff = $textarea.prop("scrollHeight") - $textarea.height();
  $textarea.live("keyup", function() {
    var height = $textarea.prop("scrollHeight") - diff;
    $textarea.height(height);
  });
});

— Anatoly Mironov
quelle

2

Meine Lösung, bei der jQuery nicht verwendet wird (weil sie manchmal nicht dasselbe sein müssen), ist unten aufgeführt. Obwohl es nur in Internet Explorer 7 getestet wurde , kann die Community auf alle Gründe hinweisen, aus denen dies falsch ist:

textarea.onkeyup = function () { this.style.height = this.scrollHeight + 'px'; }

Bisher gefällt mir die Funktionsweise sehr gut, und andere Browser interessieren mich nicht. Daher werde ich sie wahrscheinlich auf alle meine Textbereiche anwenden:

// Make all textareas auto-resize vertically
var textareas = document.getElementsByTagName('textarea');

for (i = 0; i<textareas.length; i++)
{
    // Retain textarea's starting height as its minimum height
    textareas[i].minHeight = textareas[i].offsetHeight;

    textareas[i].onkeyup = function () {
        this.style.height = Math.max(this.scrollHeight, this.minHeight) + 'px';
    }
    textareas[i].onkeyup(); // Trigger once to set initial height
}

— user1566694
quelle

1

Hier ist eine Erweiterung des Prototyp-Widgets, das Jeremy am 4. Juni veröffentlicht hat:

Es verhindert, dass der Benutzer mehr Zeichen eingibt, wenn Sie in Textbereichen Grenzwerte verwenden. Es wird geprüft, ob noch Zeichen vorhanden sind. Wenn der Benutzer Text in den Textbereich kopiert, wird der Text bei max. Länge:

/**
 * Prototype Widget: Textarea
 * Automatically resizes a textarea and displays the number of remaining chars
 * 
 * From: http://stackoverflow.com/questions/7477/autosizing-textarea
 * Inspired by: http://github.com/jaz303/jquery-grab-bag/blob/63d7e445b09698272b2923cb081878fd145b5e3d/javascripts/jquery.autogrow-textarea.js
 */
if (window.Widget == undefined) window.Widget = {}; 

Widget.Textarea = Class.create({
  initialize: function(textarea, options){
    this.textarea = $(textarea);
    this.options = $H({
      'min_height' : 30,
      'max_length' : 400
    }).update(options);

    this.textarea.observe('keyup', this.refresh.bind(this));

    this._shadow = new Element('div').setStyle({
      lineHeight : this.textarea.getStyle('lineHeight'),
      fontSize : this.textarea.getStyle('fontSize'),
      fontFamily : this.textarea.getStyle('fontFamily'),
      position : 'absolute',
      top: '-10000px',
      left: '-10000px',
      width: this.textarea.getWidth() + 'px'
    });
    this.textarea.insert({ after: this._shadow });

    this._remainingCharacters = new Element('p').addClassName('remainingCharacters');
    this.textarea.insert({after: this._remainingCharacters});  
    this.refresh();  
  },

  refresh: function(){ 
    this._shadow.update($F(this.textarea).replace(/\n/g, '<br/>'));
    this.textarea.setStyle({
      height: Math.max(parseInt(this._shadow.getHeight()) + parseInt(this.textarea.getStyle('lineHeight').replace('px', '')), this.options.get('min_height')) + 'px'
    });

    // Keep the text/character count inside the limits:
    if($F(this.textarea).length > this.options.get('max_length')){
      text = $F(this.textarea).substring(0, this.options.get('max_length'));
        this.textarea.value = text;
        return false;
    }

    var remaining = this.options.get('max_length') - $F(this.textarea).length;
    this._remainingCharacters.update(Math.abs(remaining)  + ' characters remaining'));
  }
});

— Loremaffe
quelle

1

@memical hatte eine großartige Lösung zum Festlegen der Höhe des Textbereichs beim Laden von Seiten mit jQuery, aber für meine Anwendung wollte ich die Höhe des Textbereichs erhöhen können, wenn der Benutzer mehr Inhalt hinzufügte. Ich habe die Lösung von memical wie folgt aufgebaut:

$(document).ready(function() {
    var $textarea = $("p.body textarea");
    $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
    $textarea.keyup(function(){
        var current_height = $textarea.css("height").replace("px", "")*1;
        if (current_height + 5 <= $textarea.attr("scrollHeight")) {
            $textarea.css("height", ($textarea.attr("scrollHeight") + 20));
        }
    });
});

Es ist nicht sehr flüssig, aber es ist auch keine Anwendung für Kunden, sodass Glätte keine Rolle spielt. (Wäre dies für Kunden vorgesehen, hätte ich wahrscheinlich nur ein jQuery-Plugin mit automatischer Größenänderung verwendet.)

— WNRosenberg
quelle

1

Für diejenigen, die für IE codieren und auf dieses Problem stoßen. IE hat einen kleinen Trick, der es zu 100% CSS macht.

<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>

Sie können sogar einen Wert für rows = "n" angeben, den der IE ignoriert, andere Browser jedoch verwenden. Ich hasse Codierung, die IE-Hacks implementiert, aber diese ist sehr hilfreich. Es ist möglich, dass es nur im Quirks-Modus funktioniert.

— Einstein47
quelle

1

Benutzer von Internet Explorer, Safari, Chrome und Opera müssen daran denken, den Wert für die Zeilenhöhe in CSS explizit festzulegen. Ich mache ein Stylesheet, das die anfänglichen Eigenschaften für alle Textfelder wie folgt festlegt.

<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>

— Larry
quelle

1

Hier ist eine Funktion, die ich gerade in jQuery geschrieben habe, um dies zu tun - Sie können sie auf Prototype portieren , aber sie unterstützen nicht die "Lebendigkeit" von jQuery, sodass Elemente, die durch Ajax-Anforderungen hinzugefügt wurden, nicht antworten.

Diese Version wird nicht nur erweitert, sondern auch verkleinert, wenn Löschen oder Rücktaste gedrückt wird.

Diese Version basiert auf jQuery 1.4.2.

Genießen ;)

http://pastebin.com/SUKeBtnx

Verwendung:

$("#sometextarea").textareacontrol();

oder (ein beliebiger jQuery-Selektor zum Beispiel)

$("textarea").textareacontrol();

Es wurde mit Internet Explorer 7 / Internet Explorer 8 , Firefox 3.5 und Chrome getestet . Alles funktioniert gut.

— Alex
quelle

1

Gehen Sie mit ASP.NET einfach so vor:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Automatic Resize TextBox</title>
        <script type="text/javascript">
            function setHeight(txtarea) {
                txtarea.style.height = txtdesc.scrollHeight + "px";
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <asp:TextBox ID="txtarea" runat= "server" TextMode="MultiLine"  onkeyup="setHeight(this);" onkeydown="setHeight(this);" />
        </form>
    </body>
</html>

— Pat Murray
quelle