Ein resizierbares Textfeld implementieren?

Question

Wie implementiert Stackoverflow den veränderbaren Textbereich?

Ist das etwas, das sie selbst gerollt haben oder ist es eine öffentlich verfügbare Komponente, die ich leicht an Textareas auf meinen Seiten anhängen kann?

Ich habe diese Frage gefunden und es tut nicht ganz, was ich will.

autosizing-textarea

, die mehr über automatisch Ändern der Größe Textbereiche spricht, während ich den kleinen Grab-Bereich will, dass Sie und nach unten ziehen können.

Answer 1

StackOverflow verwendet ein jQuery-Plugin, um dies zu erreichen: TextAreaResizer.

Es ist einfach genug, dies zu überprüfen - ziehen Sie einfach the JS Dateien von der Website.

Historische Anmerkung: wenn diese Antwort ursprünglich geschrieben wurde, WMD und TextAreaResizer waren zwei separate Plugins, weder von denen einer von dem SO Dev Team erstellt wurde (siehe auch: micahwittman's answer). Auch das JavaScript für die Website war ziemlich einfach zu lesen ... Keine davon sind streng wahr mehr, aber TextAreaResizer funktioniert immer noch gut.

Answer 2

Zuerst glaubte ich, es war ein eingebautes Feature der Wysiwym Markdown editor, aber Shog9 ist richtig: Es ist überhaupt nicht eingebacken, aber ist mit freundlicher Genehmigung von dem jQuery-Plugin TextAreaResizer (ich wurde vom Browser irregeführt) zu überprüfen, auf die editor demo, weil Google Chrome selbst die erweiterbare Funktionalität auf Textareas — ähnlich wie der Safari-Browser hinzugefügt wird).

Answer 3

Ich brauchte in letzter Zeit eine ähnliche Funktionalität. Es heißt Autogrow und es ist ein Plugin der erstaunlichen jQuery Bibliothek

Answer 4

Mit AngularJS:

angular.module('app').directive('textarea', function() { 
    return { 
    restrict: 'E', 
    controller: function($scope, $element) { 
     $element.css('overflow-y','hidden'); 
     $element.css('resize','none'); 
     resetHeight(); 
     adjustHeight(); 

     function resetHeight() { 
     $element.css('height', 0 + 'px'); 
     } 

     function adjustHeight() { 
     var height = angular.element($element)[0] 
      .scrollHeight + 1; 
     $element.css('height', height + 'px'); 
     $element.css('max-height', height + 'px'); 
     } 

     function keyPress(event) { 
     // this handles backspace and delete 
     if (_.contains([8, 46], event.keyCode)) { 
      resetHeight(); 
     } 
     adjustHeight(); 
     } 

     $element.bind('keyup change blur', keyPress); 

    } 
    }; 
}); 

Dies wird alle Textfelder verwandeln wachsen/schrumpfen. Wenn Sie nur bestimmte Textareas vergrößern/verkleinern möchten, ändern Sie den oberen Teil wie folgt:

angular.module('app').directive('expandingTextarea', function() { 
    return { 
    restrict: 'A', 

Hoffe, dass hilft!

Answer 5

was dazu, seine Arbeit

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>