Die Implementierung eines skalierbaren TextArea-?

Question

Wie die Stackoverflow resizable TextArea- implementieren?

Ist das etwas, rollten sie selbst oder ist es eine öffentlich zugängliche Komponente, die ich leicht zu Textbereiche auf meinen Seiten anhängen?

Ich fand diese Frage, und es nicht ganz, was ich will.

autosizing-TextArea-

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

Answer 1

Stackoverflow verwendet eine jQuery-Plugin, dies zu erreichen. TextAreaResizer

Es ist einfach genug, um dies zu überprüfen -. Zieht nur die 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 Antwort ). Außerdem war das JavaScript für die Site ganz leicht zu lesen ... Keiner von ihnen ist streng mehr wahr, aber TextAreaResizer funktioniert immer noch einwandfrei.

Answer 2

ich brauchte eine ähnliche Funktionalität vor kurzem. Seine genannt Automatische Vergrößerung und es ist ein Plugin der erstaunlichen jQuery Bibliothek

Answer 3

Zuerst glaubte ich, es war eine integrierte Funktion des WYSIWYM Markdown-Editor , aber Shog9 ist richtig: es ist nicht backene in überhaupt, aber ist mit freundlicher Genehmigung der jQuery-Plugin TextAreaResizer (ich war auf dem Editor Demo weil Google Chrome selbst fügt die Funktionalität erweiterbar auf Textareas-ähnlich wie der Safari-Browser der Fall ist).

Answer 4

AngularJS verwenden:

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 verwandeln alle Textfelder wachsen / schrumpfen. Wenn Sie nur bestimmte Textbereiche wachsen / schrumpfen - das Oberteil wie folgt zu lesen ändern:

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

Ich hoffe, das hilft!

Answer 5

was ist das, seine Arbeit

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