Ein veränderbares Textfeld implementieren?

Wie funktioniert Stackoverflow implementieren, die resizable-textarea?

Ist das etwas, rollten Sie sich oder ist es eine öffentlich zugängliche Komponente, die ich problemlos anfügen können, um Texteingabefelder auf meinen Seiten?

Fand ich diese Frage, und es nicht ganz tun, was ich will.

die automatische Skalierung der Seiten-textarea

Dass die Gespräche mehr über automatisch Größenänderung Texteingabefelder in der Erwägung, dass will ich den kleinen grab-Bereich, können Sie ziehen nach oben und unten.

InformationsquelleAutor der Frage Mark Biek | 2008-09-29

  1. 25

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

    Ist es einfach genug, um dies zu überprüfen - nur ziehen die JS Dateien von der Website.

    Historische Anmerkung: bei dieser Antwort wurde ursprünglich geschrieben, die Verbreitung von Massenvernichtungswaffen und TextAreaResizer wurden zwei getrennte plugins, weder das eine wurde verfasst durch den sogenannten Dev-Team (siehe auch: micahwittman Antwort). Auch die JavaScript für die Seite war ganz einfach zu Lesen... Keine dieser streng mehr wahr, aber TextAreaResizer funktioniert immer noch gut.

    InformationsquelleAutor der Antwort Shog9

  2. 11

    Brauchte ich eine ähnliche Funktionalität vor kurzem. Die genannte Die automatische Vergrößerung und es ist ein Plugin, der die erstaunliche jQuery Bibliothek

    InformationsquelleAutor der Antwort Roman Ganz

  3. 4

    Zuerst habe ich geglaubt, es sei eine integrierte Funktion der Wysiwym Markdown-editoraber Shog9 ist richtig: es ist nicht gebacken-in, sondern ist mit freundlicher Genehmigung von das jQuery-plugin TextAreaResizer (ich war in die Irre führen, indem Sie den browser verwenden, um zu überprüfen, auf die editor demo da Google Chrome selbst fügt die erweiterbare Funktionalität über Texteingabefelder, die—ähnlich wie der Safari-browser unterstützt).

    InformationsquelleAutor der Antwort micahwittman

  4. 0

    Mithilfe Von 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);

    }
  };
});

    Diese verwandeln alle Ihre Texteingabefelder zu wachsen/schrumpfen. Wenn Sie möchten, dass nur bestimmte Texteingabefelder zu wachsen/schrumpfen - ändern Sie das Obere Teil zu Lesen, wie diese:

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

    Hoffe, das hilft!

    InformationsquelleAutor der Antwort benshope

  5. -1

    was über diese, seine Arbeit

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

    InformationsquelleAutor der Antwort Martin Prestone

Schreibe einen Kommentar