Wie kann ich mit Prototype die Größe eines Textbereichs automatisch anpassen?

StackOverflow https://stackoverflow.com/questions/7477

Frage

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 einnehmen würde und die Größe automatisch angepasst würde, wenn der Text geändert würde.

Hier ist aktuell ein Screenshot davon.

ISO Address

Irgendwelche Ideen?

@Chris

Ein guter Punkt, aber es gibt Gründe, warum ich die Größe ändern möchte.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 ziemlich viel vertikalen Platz ein.

Ich kann die Schriftart reduzieren, aber ich brauche eine große und lesbare Adresse.Jetzt kann ich den Textbereich verkleinern, aber dann habe ich Probleme mit Leuten, die eine Adresszeile haben, die 3 oder 4 (eine braucht 5) Zeilen dauert.Die Notwendigkeit, dass der Benutzer eine Bildlaufleiste verwenden muss, ist ein absolutes Tabu.

Ich denke, ich sollte etwas genauer sein.Ich bin auf der Suche nach einer vertikalen Größenänderung, und die Breite spielt keine so große Rolle.Das einzige Problem, das dabei auftritt, ist, dass die ISO-Nummer (die große „1“) unter die Adresse geschoben wird, wenn die Fensterbreite zu klein ist (wie Sie auf dem Screenshot sehen können).

Es geht nicht um eine Spielerei;Es geht darum, ein Textfeld zu haben, das der Benutzer bearbeiten kann und das keinen unnötigen Platz einnimmt, aber den gesamten darin enthaltenen Text anzeigt.

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

Ich habe den Code ein wenig geändert, weil er sich etwas seltsam verhielt.Ich habe es so geändert, dass es bei der Eingabe aktiviert wird, da das gerade eingegebene Zeichen nicht berücksichtigt wird.

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;
};
War es hilfreich?

Lösung

Facebook macht das, wenn man auf die Wände von Leuten schreibt, ändert aber nur die Größe vertikal.

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

Keiner der Facebook-Nutzungsneulinge, die ich kenne, hat jemals etwas darüber erwähnt oder war verwirrt.Ich würde dies als anekdotischen Beweis verwenden, um zu sagen: „Machen Sie weiter, setzen Sie es um.“

Etwas JavaScript-Code, um dies zu tun Prototyp (weil ich das kenne):

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

Andere Tipps

Eine Verfeinerung einiger dieser Antworten besteht darin, CSS einen größeren Teil der Arbeit erledigen zu lassen.

Der grundlegende Weg scheint zu sein:

  1. Erstellen Sie ein Containerelement zur Aufnahme des textarea und ein verstecktes div
  2. Behalten Sie mithilfe von Javascript die bei textareaDie Inhalte werden mit dem synchronisiert div'S
  3. Lassen Sie den Browser die Höhe dieses Divs berechnen
  4. Weil der Browser das Rendern/Skalieren des Verborgenen übernimmt div, Wir vermeiden es ausdrücklich, die ausdrücklich einzustellen textarea’s Größe.

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;
    width: 100%;
}
<div class="textarea-container">
    <textarea id="textArea"></textarea>
    <div id="textCopy"></div>
</div>

Hier ist eine weitere Technik zur automatischen Größenanpassung eines Textbereichs.

  • Verwendet Pixelhöhe anstelle von Zeilenhöhe:Präzisere Handhabung des Zeilenumbruchs, wenn eine proportionale Schriftart verwendet wird.
  • Akzeptiert entweder eine ID oder ein Element als Eingabe
  • Akzeptiert einen optionalen Parameter für die maximale Höhe – nützlich, wenn Sie den Textbereich nicht über eine bestimmte Größe hinaus wachsen lassen möchten (alles auf dem Bildschirm belassen, Layoutunterbrechungen vermeiden usw.)
  • Getestet auf Firefox 3 und Internet Explorer 6

Code:(einfaches 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, zielt auf den Textbereich ab, in den ich gerade tippe – falls vorhanden Feuerkäfer installiert, beide Beispiele in die Konsole einfügen und auf dieser Seite testen)

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

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 benötigen Sie keine versteckten Divs oder ähnliches.

Notiz:Vielleicht musst du damit spielen this.style.height = (this.scrollHeight) + "px"; abhängig davon, wie Sie den Textbereich gestalten (Zeilenhöhe, Abstand und dergleichen).

Hier ist ein Prototyp Version 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.Auch wenn dies nicht erforderlich ist, handelt es sich um eine sehr nützliche Funktion, die leicht entfernt werden kann, 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 Aufruf new Widget.Textarea('element_id').Die Standardoptionen können überschrieben werden, indem sie als Objekt übergeben werden, z. B. 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);
  });   
});

Hier ist eine Lösung mit JQuery:

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

abc ist ein teaxtarea.

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

Ich schaue mir das gerade noch einmal an, ich habe es etwas aufgeräumter gemacht (obwohl jemand, der die Flasche voll hat Prototyp/JavaScript könnte 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 anrufen mit:

new TextAreaResize('textarea_id_name_here');

Ich habe etwas ganz einfaches gemacht.Zuerst habe ich die TextArea in ein DIV eingefügt.Zweitens habe ich die angerufen ready Funktion zu diesem Skript hinzufügen.

<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 eines TextAreas einer Zeile.

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

Also habe ich den Code von Orion verwendet und ihn geändert.

Ich habe eine Mindesthöhe hinzugefügt, damit es beim Zerstören 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;
};

Wie die Antwort von @memical.

Allerdings habe ich einige Verbesserungen festgestellt.Sie können die jQuery verwenden height() Funktion.Beachten Sie jedoch die Pixel, die oben und unten aufgefüllt werden.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);
  });
});

Meine Lösung ohne jQuery zu verwenden (weil sie manchmal nicht dasselbe sein müssen) ist unten.Obwohl es nur getestet wurde Internet Explorer 7, damit die Community alle Gründe nennen kann, warum das falsch ist:

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

Bisher gefällt mir die Funktionsweise sehr gut und ich interessiere mich nicht für andere Browser, daher werde ich es 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
}

Hier ist eine Erweiterung des Prototype-Widgets, das Jeremy am 4. Juni gepostet hat:

Es hindert den Benutzer daran, weitere Zeichen einzugeben, wenn Sie Beschränkungen in Textbereichen verwenden.Es prüft, ob noch Zeichen vorhanden sind.Wenn der Benutzer Text in den Textbereich kopiert, wird der Text maximal abgeschnitten.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'));
  }
});

@memical Ich hatte eine tolle Lösung zum Festlegen der Höhe des Textbereichs beim Seitenladen mit jQuery, aber für meine Anwendung wollte ich in der Lage sein, die Höhe des Textbereichs zu erhöhen, wenn der Benutzer mehr Inhalt hinzufügt.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 kundenorientierte Anwendung, daher spielt die Glätte keine Rolle.(Wäre dies kundenorientiert gewesen, hätte ich wahrscheinlich einfach ein jQuery-Plugin zur automatischen Größenänderung verwendet.)

Für diejenigen, die für den IE programmieren 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 wirklich Code, der IE-Hacks implementiert, aber dieser hier ist sehr hilfreich.Möglicherweise funktioniert es nur im Quirks-Modus.

Internet Explorer, Safari, Chrome und Oper Benutzer müssen daran denken, den Wert für die Zeilenhöhe explizit in CSS festzulegen.Ich erstelle 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>

Hier ist eine Funktion, die ich gerade in jQuery geschrieben habe, um dies zu tun – Sie können sie darauf portieren Prototyp, aber sie unterstützen nicht die „Liveness“ von jQuery, sodass durch Ajax-Anfragen hinzugefügte Elemente nicht reagieren.

Diese Version wird nicht nur erweitert, sondern auch verkleinert, wenn Entf oder die Rücktaste gedrückt wird.

Diese Version basiert auf jQuery 1.4.2.

Genießen ;)

http://pastebin.com/SUKeBtnx

Verwendung:

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

oder (z. B. ein beliebiger jQuery-Selektor)

$("textarea").textareacontrol();

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

Gehen Sie mit ASP.NET einfach wie folgt 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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top