Implementare un'area di testo ridimensionabile?

Question

In che modo Stackoverflow implementa l'area di testo ridimensionabile?

È qualcosa che si sono fatti rotolare da soli o è un componente pubblicamente disponibile che posso facilmente collegare alle textareas sui miei siti?

Ho trovato questa domanda e non fa proprio quello che voglio.

autosizing-textarea

Questo parla di più del ridimensionamento automatico delle textareas mentre voglio la piccola area di acquisizione che puoi trascinare su e giù.

Answer 1

StackOverflow utilizza un plug-in jQuery per ottenere questo risultato: TextAreaResizer .

È abbastanza facile verificarlo: basta estrarre i file JS dal sito.

Nota storica: quando questa risposta era stata originariamente scritta, WMD e TextAreaResizer erano due plugin separati, nessuno dei quali era stato creato dal SO Dev Team (vedi anche: la risposta di micahwittman ). Inoltre, JavaScript per il sito è stato abbastanza facile da leggere ... Nessuno di questi è rigorosamente più vero, ma TextAreaResizer funziona ancora bene.

Answer 2

Di recente avevo bisogno di una funzionalità simile. Si chiama Autogrow ed è un plugin per l'incredibile jQuery libreria

Answer 3

All'inizio credevo fosse una funzionalità integrata dell ' Wysiwym Markdown editor , ma Shog9 è corretto: non è affatto integrato, ma è per gentile concessione del plug-in jQuery TextAreaResizer (ero fuori strada dal browser che stava usando per verificare la demo dell'editor perché Google Chrome stesso aggiunge la funzionalità espandibile su textareas & # 8212; proprio come fa il browser Safari).

Answer 4

Uso di 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);

    }
  };
});

Questo trasformerà tutte le tue textareas in crescere / ridurre. Se desideri che solo le textareas specifiche crescano / riducano, modifica la parte superiore in modo da leggere in questo modo:

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

Spero che ti aiuti!

Answer 5

che dire di questo, il suo lavoro

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