Wie autosize eine textarea mit Prototyp?

Zur Zeit arbeite ich an einer internen sales-Anwendung für die Firma für die ich arbeite, und ich habe eine form, die dem Benutzer ermöglicht, die Lieferanschrift zu ändern.

Nun ich denke, es würde viel schöner Aussehen, wenn die textarea-ich bin für die Haupt-Email-Adresse-details, würde nur dauern, bis die Gegend der text in ihm, und automatisch verkleinern, wenn der text geändert wurde.

Hier ist ein screenshot des derzeit.

Wie autosize eine textarea mit Prototyp?

Irgendwelche Ideen?

@Chris

Einen guten Punkt, aber es gibt Gründe, warum ich wollen, es zu ändern. Ich möchte den Bereich dauert es, bis der Bereich, der die darin enthaltenen Informationen. Wie man sehen kann im Screenshot, wenn ich eine Feste textarea, es dauert, bis eine faire wack vertikalen Raum.

Ich kann, reduzieren Sie die schriftart, aber ich brauche Adresse werden groß und gut lesbar. Jetzt kann ich die verringern Sie die Größe der text-Bereich, aber dann habe ich Probleme mit Menschen, die eine Adresszeile, die dauert 3 oder 4 (man nimmt 5) Linien. Benötigen, um die Benutzer eine Bildlaufleiste ist ein wichtiger no-no.

Denke ich, sollte ich ein bisschen genauer sein. Ich bin nach der vertikale skalieren und die Breite spielt keine Rolle, wie viel. Das einzige problem, das passiert, ist die ISO-Zahl (die große "1") gedrängt unter der Adresse, wenn die Fensterbreite zu klein (wie man auf dem screenshot erkennen kann).

Es geht nicht um eine gimick; es geht darum, ein Textfeld, das der Benutzer Bearbeiten kann, dass nicht unnötiger Speicherplatz, sondern alle den text in dem Textfeld.

Aber wenn jemand kommt mit einer anderen Herangehensweise an das problem das ich offen zu.

Ich geändert habe den code ein wenig, weil es tätig war, ein wenig seltsam. Ich geändert es zu aktivieren, keyup, denn es würde nicht berücksichtigen, den Charakter, das war nur getippt.

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

Können Sie erstellen eine demo-Website, wo wir sehen, das bei der Arbeit?
dieses plugin scheint gut zu sein jacklmoore.com/autosize
Gibt es ein JQuery-Version? Wie der Zugriff auf die Spalten und Zeilen einer TextArea in JQuery?
Fast das gleiche, aber mit der ausdrücklichen Voraussetzung, dass sollte kleiner werden, wenn der text entfernt wird: stackoverflow.com/questions/454202/...

InformationsquelleAutor Mike | 2008-08-11

css html javascript prototypejs textarea

72

Facebook tut es, wenn Sie schreiben: auf die Wände, sondern nur die Größe vertikal.

Horizontale Größe scheint mir für ein Durcheinander, wegen word-wrap lange Zeilen, und so weiter, aber die vertikale Größe scheint zu sein, ziemlich sicher und schön.

Keiner der Facebook-Nutzung-Neulinge die ich kenne, haben jemals erwähnt, dass nichts über es oder verwechselt worden. Ich würde dies als anekdotische Beweise, um zu sagen: "go ahead, es umzusetzen'.

Einige JavaScript-code, es zu tun, mit Prototyp (denn das ist, was ich bin vertraut mit):

<!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 ist sehr naiv und nicht gut getestet, und Sie wahrscheinlich nicht wollen, es zu benutzen für die Textfelder mit Romanen, die in Ihnen, aber Sie bekommen die Allgemeine Idee.

Dabei nimmt der browser bricht bei jedem Zeichen, das nicht korrekt ist. Versuchen Sie es auf <textarea cols='5'>0 12345 12345 0</textarea>. (Schrieb ich eine fast identische Umsetzung und nicht fangen diese erst nach einem Monat, es zu benutzen.) Es auch nicht für leere Zeilen.
Gibt es ein JQuery-version für diese?
Der backslash $A(str.split("\n")) muss anderen. (Mein edit in der obigen Antwort nicht überleben, aus irgendeinem Grund.)

InformationsquelleAutor Orion Edwards

61

Einer Verfeinerung einige dieser Antworten ist lassen Sie CSS mehr von der Arbeit.

Der normale Weg zu sein scheint:
1. Erstellen Sie ein container-element halten die textarea und eine versteckte div
2. Javascript zu verwenden, halten Sie die textarea's Inhalte synchronisiert sich mit div's
3. Lassen Sie den browser die Arbeit der Berechnung der Höhe des div -
4. Weil der browser verarbeitet rendering /Dimensionierung der versteckten div wir vermeiden
  durch explizites festlegen der textarea's Höhe.
JS:
```
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/>')
}
```
CSS:
```
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;
    width: 100%;
}
```
HTML:
```
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>
```
- Dies ist eine wunderbare Lösung! Die einzige Einschränkung ist, dass Browser, die keine Unterstützung von box-sizing (IE<7) nicht korrekt berechnen der Breite und deshalb verlieren Sie einige Genauigkeit, aber wenn Sie verlassen Sie eine Linie im Wert von Leerzeichen am Ende, Sie sollten noch okay sein. Auf jeden Fall lieben es für die Einfachheit.
- Funktioniert noch besser mit resize:none; im style der textarea!
- Ich nahm Freiheit bei der Umsetzung dieser Lösung, die als eigenständige, einfach zu bedienen jQuery-plugin, mit kein markup oder styling erforderlich. xion.io/jQuery.xarea für den Fall jemand könnte es gebrauchen 🙂
- Einstellung textCopy zu verborgenen noch immer die Möglichkeit die versteckten div-Platz in der markup so als textCopy Inhalt größer werden, wirst du irgendwann eine Bildlaufleiste entlang der gesamten Länge der Seite...
- Es wäre schön zu sehen, dass dies ein Turnschuh.
- Für Leute mit web-Komponenten, diese Lösung wurde integriert in die Komponente basic-autosize-textarea. Es gibt eine demo.
- Ein weiteres nettes zwicken; die var text = $("#textArea").val().replace(/\n/g, '<br/>') + ' '; stellt sicher, dass Sie nicht bekommen, ruckartige Verhalten, wenn man von eine neue, leere Zeile an das Ende der textarea auf eine nicht-leere, da die versteckten div-macht Sie sicher, wrap der nbsp.
- großen Ruf auf hinzufügen ein ' ', um loszuwerden, die plötzliche Zunahme der Größe, wenn Sie den ersten Brief auf einer neuen Zeile - für mich ist es gebrochen ohne this - dies sollte Hinzugefügt werden, um die Antwort!
- Dieses JQuery-plugin, das gleiche zu tun flaviusmatis.github.io/flexibleArea.js.
- Wenn ich das hier lese, habe ich eine Gänsehaut - so einfach und elegant, Recht selten zu sehen, eine Lösung wie diese beim surfen zufällig SO. Vielen Dank für die inspiration und viele andere entscheiden sich nach unten Blättern!
InformationsquelleAutor Jan Miksovsky
38

Hier ist eine weitere Technik für die automatische Skalierung der Seiten eine textarea.
- Verwendet pixel Höhe statt line-height: präziser Umgang mit Zeilenumbruch, wenn eine proportionale schriftart verwendet wird.
- Akzeptiert entweder ID oder element als input
- Akzeptiert optional eine maximale Höhe parameter - nützlich, wenn Sie lieber nicht lassen Sie den text-Bereich wachsen ab einer bestimmten Größe (halten Sie alle auf dem Bildschirm zu vermeiden, brechen layout, etc.)
- Getestet auf Firefox 3 und Internet Explorer 6
Code:
(plain-vanilla-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 auf die textarea-ich tippe in der rechten jetzt - wenn Sie Firebug installiert, das einfügen von samples in die Konsole und den test auf dieser Seite)
```
$("#post-text").keyup(function()
{
   FitToContent(this, document.documentElement.clientHeight)
});
```
- Nett, aber nicht "un-grow" - wenn Sie text/line entfernt von der textarea..
- das wäre wahrscheinlich nicht allzu schwer zu implementieren, fügen Sie einfach eine weitere bedingte
- Wenn der text in der box nicht füllen Sie es, clientHeight und scrollHeight gleich sind, so dass Sie können nicht diese Methode verwenden, wenn Sie möchten, dass Ihre textarea zu schrumpfen als auch wachsen.
- Zu einfach machen Sie es schrumpfen, Sie müssen nur fügen Sie diesen code vor Zeile 6: if (text.clientHeight == text.scrollHeight) text.style.height = "20px";
InformationsquelleAutor Shog9
12

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"; 
    });
});
```
Diese Weise brauchen Sie nicht alle versteckten divs oder irgendetwas wie das.

Hinweis: möglicherweise haben Sie zu spielen mit this.style.height = (this.scrollHeight) + "px"; je nachdem, wie Sie den Stil der textarea (line-height, padding und solche Sachen).
- Die beste Lösung, wenn Sie nichts dagegen haben, scrollbar zu blinken.
- Es wäre genug mit dem fangen von nur keyup-Ereignis ein. Glaubst du nicht so?
- Set textarea-overflow-Eigenschaft auf "hidden" zu vermeiden scrollbar zu blinken.
- keyup könnte genug sein, aber ich bin mir nicht sicher. Ich war so glücklich, dass ich es herausgefunden, dass ich aufgehört habe zu versuchen etwas anderes.
InformationsquelleAutor Eduard Luca

8

Hier ein Prototyp version der Größenanpassung eines text-Bereich, dass ist nicht abhängig von der Anzahl der Spalten des textarea. Dies ist eine hervorragende Technik, denn es ermöglicht Ihnen die Kontrolle der Textbereich über CSS als auch variable Breite der textarea. Darüber hinaus ist diese version zeigt die Anzahl der verbleibenden Zeichen. Während nicht gewünscht, es ist eine ziemlich nützliche Funktion und ist leicht zu entfernen, wenn unerwünscht.

//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 den Aufruf new Widget.Textarea('element_id'). Die Standardeinstellungen können überschrieben werden, indem Sie als ein Objekt, z.B. new Widget.Textarea('element_id', { max_length: 600, min_height: 50}). Wenn Sie möchten, um es zu schaffen, die für alle Texteingabefelder auf der Seite, etwas zu tun:

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

InformationsquelleAutor Jeremy Kauffman

7

Hier ist eine Lösung mit JQuery:
```
$(document).ready(function() {
    var $abc = $("#abc");
    $abc.css("height", $abc.attr("scrollHeight"));
})
```
abc ist ein teaxtarea.
- demo basiert auf diesem: jsbin.com/ulizud/3/edit
InformationsquelleAutor memical

5

Überprüfen Sie den untenstehenden 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
    });
});

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

InformationsquelleAutor Gyan

3

Nur der Rückgriff auf diese, ich habe es ein wenig aufgeräumter (obwohl jemand, der die volle Flasche auf Prototyp/JavaScript konnten Verbesserungen vorschlagen?).

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 aufrufen mit:

new TextAreaResize('textarea_id_name_here');

InformationsquelleAutor Mike

3

Habe ich so etwas auch ganz einfach. Zuerst legte ich die TextArea in ein DIV. Zweite, die ich genannt habe, auf der ready - Funktion, um dieses Skript.

<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. Es ist die maximale Höhe des div-sobald es gemacht wird, geteilt durch die Höhe einer TextArea von einer Zeile.

InformationsquelleAutor Eduardo Mass

2

Brauchte ich diese Funktion für mich, aber keine von denen, die von hier aus gearbeitet, als ich Sie brauchte.

So habe ich Orion code und verändert es.

Fügte ich in einer Mindesthöhe, so dass auf den zu zerstören es nicht zu klein.

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

InformationsquelleAutor

2

Wie die Antwort von @memical.

Aber ich fand einige Verbesserungen. Sie können die jQuery - height() Funktion. Aber bewusst sein, padding-top und padding-bottom Pixel. Ansonsten wird Ihr textarea wird zu schnell wachsen.

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

InformationsquelleAutor Anatoly Mironov

2

Meine Lösung nicht die Verwendung von jQuery (weil Sie manchmal nicht die gleiche Sache) ist unten. Es wurde allerdings nur getestet Internet Explorer 7, so kann die Gemeinschaft darauf hin, alle die Gründe, warum dies falsch ist:

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

So weit ich mag, wie es funktioniert, und ich Sorge mich über die anderen Browser, also werde ich wohl für alle meine Texteingabefelder:

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

tolle Sache, funktioniert für mich! Aber der Größenänderung die Breite als auch noch fehlt..

InformationsquelleAutor user1566694

1

Hier ist eine Erweiterung der Prototyp-widget, dass Jeremy geschrieben am 4. Juni:

Es Stoppt die Benutzer von der Eingabe von mehr Zeichen an, wenn Sie mit Grenzen in Texteingabefelder. Es wird geprüft, ob Zeichen vorhanden sind Links. Wenn der Benutzer kopiert text in die textarea schreiben, der text ist abgeschnitten bei der 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'));
  }
});

InformationsquelleAutor lorem monkey

1

@memical hatten eine tolle Lösung für die Einstellung der Höhe der textarea-Komponente auf pageload mit jQuery, aber für meine Anwendung, die ich wollte in der Lage sein zu erhöhen die Höhe der textarea als Benutzer Hinzugefügt, mehr Inhalt. Ich baute aus memical Lösung mit der folgenden:
```
$(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 glatt, aber es ist auch nicht eine client-orientierte Anwendung, so dass Glätte nicht wirklich wichtig. (Hatte dies mit Kundenkontakt, hätte ich wahrscheinlich nur ein auto-resize jQuery-plugin.)

InformationsquelleAutor WNRosenberg
1

Für diejenigen, die das Programmieren für den IE und auf dieses problem stoßen. IE hat einen kleinen trick, der macht es zu 100% CSS.
```
<TEXTAREA style="overflow: visible;" cols="100" ....></TEXTAREA>
```
Können Sie auch einen Wert für rows="n", die der IE ignorieren, aber auch andere Browser verwenden. Ich hasse Codierung, die IE-hacks, aber diese hier ist sehr hilfreich. Es ist möglich, dass es funktioniert nur im Quirks-Modus.

InformationsquelleAutor Einstein47
1

Internet Explorer, Safari, Chrome und Opera müssen die Benutzer daran erinnern, um explicidly setzen Sie den line-height Wert im CSS. Ich mache ein stylesheet legt die anfängliche Eigenschaften für alle Textfelder wie folgt aus.
```
<style>
    TEXTAREA { line-height: 14px; font-size: 12px; font-family: arial }
</style>
```
InformationsquelleAutor Larry
1

Hier ist eine Funktion, die ich einfach schrieb in jQuery zu tun - Sie können die Portierung auf Prototyp, aber Sie unterstützen nicht die "ausführen, um liveness" von jQuery, so dass Elemente Hinzugefügt, die von Ajax-Anfragen nicht reagieren.

Diese version erweitert nicht nur, sondern es auch Verträge, wenn delete oder backspace gedrückt wird.

Diese version basiert auf jQuery 1.4.2.

Genießen 😉

http://pastebin.com/SUKeBtnx

Verwendung:
```
$("#sometextarea").textareacontrol();
```
oder (beliebige jQuery-Selektor zum Beispiel)
```
$("textarea").textareacontrol();
```
Getestet wurde es auf Internet Explorer 7/Internet Explorer 8, Firefox 3.5 und Chrome. Alles Prima funktioniert.

InformationsquelleAutor Alex

1

Verwenden ASP.NET einfach nur dies:

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

InformationsquelleAutor Pat Murray

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.