¿Implementando un área de texto redimensionable?

Question

¿Cómo implementa Stackoverflow el área de texto redimensionable?

¿Es algo que ellos mismos rodaron o es un componente disponible al público que puedo adjuntar fácilmente a áreas de texto en mis sitios?

Encontré esta pregunta y no hace lo que quiero.

autosizing-textarea

Eso habla más sobre cambiar automáticamente el tamaño de las áreas de texto, mientras que quiero el pequeño área de agarre que puede arrastrar hacia arriba y hacia abajo.

Answer 1

StackOverflow utiliza un complemento jQuery para lograr esto: TextAreaResizer .

Es bastante fácil verificar esto: simplemente extraiga los archivos JS del sitio.

Nota histórica: cuando esta respuesta se escribió originalmente, WMD y TextAreaResizer eran dos complementos separados, ninguno de los cuales fue creado por el Equipo SO Dev (ver también: respuesta de Minehwittman ). Además, el JavaScript para el sitio era bastante fácil de leer ... Ninguno de estos es estrictamente verdadero más, pero TextAreaResizer todavía funciona bien.

Answer 2

Necesitaba una funcionalidad similar recientemente. Se llama Autogrow y es un complemento de la increíble biblioteca jQuery

Answer 3

Al principio, creía que era una función incorporada del editor de Wysiwym Markdown , pero Shog9 es correcto: no está integrado en absoluto, pero es cortesía del complemento jQuery TextAreaResizer (el navegador me estaba extraviando para verificar el demostración del editor porque el propio Google Chrome agrega la funcionalidad expandible en áreas de texto, al igual que lo hace el navegador Safari).

Answer 4

Usando 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);

    }
  };
});

Esto transformará todas sus áreas de texto para crecer / reducirse. Si solo desea que las áreas de texto específicas crezcan / se reduzcan, cambie la parte superior para que lea así:

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

¡Espero que eso ayude!

Answer 5

¿qué pasa con esto, su trabajo

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