Textfeld automatisch mit Prototyp anpassen

  • Ich arbeite gerade 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.

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

    Hier ist derzeit ein Screenshot davon.

    Textfeld automatisch mit Prototyp anpassen

    Irgendwelche Ideen?


    @Chris

    Ein guter Punkt, aber es gibt Gründe, die ich möchte Größe ändern Ich möchte, dass es sich bei dem Bereich um den Bereich der darin enthaltenen Informationen handelt. Wie Sie im Screenshot sehen können, nimmt ein fester Textbereich ziemlich viel Platz in Anspruch.

    Ich kann die Schrift verkleinern, aber ich brauche die Adresse groß und lesbar sein. Jetzt kann ich die Größe des Textbereichs reduzieren, aber dann habe ich Probleme mit Leuten, die eine Adresszeile haben, die 3 oder 4 (eine Zeile dauert 5) Zeilen hat. Wenn der Benutzer eine Bildlaufleiste verwenden muss, ist dies eine wichtige Nr.

    Ich denke, ich sollte etwas genauer sein. Ich bin nach vertikaler Größenänderung und die Breite spielt dabei keine Rolle. 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 auf dem Screenshot zu sehen ist).

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

    Allerdings, wenn jemand einen anderen Weg findet Annäherung an das Problem Ich bin auch dafür offen.


    Ich habe den Code ein wenig geändert, weil er sich etwas seltsam verhalten hat. 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;
    };
     
    13 February 2016
    Peter Mortensen
17 answers
  • Facebook tut dies, wenn Sie auf die Wände von Personen schreiben, aber nur die vertikale Größe ändern.

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

    Keiner der Facebook-Neulinge, von denen ich weiß, dass er je etwas davon erwähnt oder verwirrt hat . Ich würde dies als Anekdoten-Beweis verwenden, um zu sagen: "Mach weiter, implementiere es".

    Einige JavaScript-Codes, die dies tun, verwenden Prototyp (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 in Textboxen mit Romanen verwenden, aber Sie haben die allgemeine Vorstellung.

    13 February 2016
    Peter Mortensen
  • Einige dieser Antworten lassen sich dadurch verfeinern, dass CSS mehr Arbeit erledigt.

    Die grundlegende Route scheint zu sein:

    1. Erstellen Sie ein Containerelement für textarea und ein verstecktes div
    2. Halten Sie mit Javascript den Inhalt von textarea synchronisiert mit den div 's
    3. Lassen Sie den Browser die Höhe des divs berechnen
    4. Da der Browser das Rendern / Ändern der verborgenen div, wir vermeiden, dass die Höhe von textarea explizit setzt.

    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/>')
    }< / code> 
    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%;
    }< / code> 
    <div class="textarea-container">
        <textarea id="textArea"></textarea>
        <div id="textCopy"></div>
    </div>< / code> 

    17 May 2018
    9999yearsueni
  • Hier eine weitere Technik zum automatischen Ändern der Größe eines Textbereichs.

    • Verwendet die Pixelhöhe anstelle der Zeilenhöhe: Genauere Behandlung von Zeilenumbrüchen bei proportionalem Wert font wird verwendet.
    • Akzeptiert entweder eine ID oder ein Element als Eingabe
    • Akzeptiert einen optionalen Parameter für die maximale Höhe - nützlich, wenn der Textbereich nicht vergrößert werden soll jenseits einer bestimmten Größe (lassen Sie alles auf dem Bildschirm, vermeiden Sie ein beschädigtes Layout usw.)
    • Getestet mit Firefox 3 und Internet Explorer 6

    Code: (einfach 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 Im Textbereich tippe ich gerade ein - wenn Sie Firebug installiert haben, füge beide Samples in die Konsole ein und teste auf dieser Seite)

    $("#post-text").keyup(function() { FitToContent(this, document.documentElement.clientHeight) });
    13 February 2016
    Peter Mortensen
  • 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 etwas ähnliches.

    Hinweis: Möglicherweise müssen Sie mit this.style.height = (this.scrollHeight) + "px"; spielen, je nachdem, wie Sie den Textbereich gestalten (Zeilenhöhe, Abstand und ähnliches).

    13 February 2016
    Peter Mortensen
  • Hier ist eine Prototyp -Version zum Ändern der Größe eines Textbereichs, der nicht von der Anzahl der Spalten im Textbereich abhängig ist. Dies ist eine überlegene Technik, da Sie den Textbereich über CSS steuern können und über eine Textbreite mit variabler Breite verfügen. Darüber hinaus zeigt diese Version die Anzahl der verbleibenden Zeichen an. Wenn es nicht angefordert wird, ist es eine ziemlich nützliche Funktion und kann leicht entfernt werden, wenn es 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 sie als Objekt übergeben, 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, führen Sie Folgendes aus:

     Event.observe(window, 'load', function() {
      $$('textarea').each(function(textarea) {
        new Widget.Textarea(textarea);
      });   
    });
     
    07 February 2016
    Markus SafarMHop
  • Hier ist eine Lösung mit JQuery:

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

    abc ist ein teaxtarea.

    23 February 2017
    Abhishek PandeyRafee Muhammad
  • Ü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
        });
    });
     
    07 February 2016
    Markus SafarMHop
  • Wenn ich das noch einmal aufgreife, habe ich es etwas aufgeräumt (obwohl jemand, der eine volle Flasche auf 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 Aufruf mit:

     new TextAreaResize('textarea_id_name_here');
     
    13 February 2016
    Peter Mortensen
  • Ich habe etwas ganz leicht gemacht. Zuerst füge ich die TextArea in eine DIV ein. Zweitens habe ich die Funktion ready zu diesem 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, wenn es gerendert wird, geteilt durch die Höhe einer TextArea einer Zeile.

    13 February 2016
    Peter Mortensen
  • Wie die Antwort von @memical.

    Allerdings habe ich einige Verbesserungen gefunden. Sie können die jQuery-Funktion height() verwenden. Beachten Sie jedoch die Pixel für das Auffüllen der oberen und unteren Abstände. Sonst wird Ihr Textbereich 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);
      });
    });
     
    13 February 2016
    Peter Mortensen