html - ejemplo - ¿Implementando un área de texto redimensionable?

textarea placeholder

Question

¿Cómo implementa Stackoverflow el textarea de tamaño variable?

¿Es algo que hicieron rodar ellos mismos o es un componente disponible públicamente que puedo adjuntar fácilmente a textareas en mis sitios?

Encontré esta pregunta y no hace exactamente lo que quiero.

autosizing-textarea

Eso habla más sobre el cambio automático de tamaño de las áreas de texto, mientras que yo quiero el área de agarre pequeña que puedes arrastrar hacia arriba y hacia abajo.

Answer 1

Al principio, creí que era una característica incorporada del editor Wysiwym Markdown , pero Shog9 es correcto: no está en absoluto horneado, pero es cortesía del plugin jQuery TextAreaResizer (el navegador me extravió porque el navegador estaba usando para verificar en la demo del editor porque Google Chrome mismo agrega la funcionalidad ampliable en textareas, al igual que el navegador Safari).

Answer 2

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

Answer 3

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 SO Dev Team (ver también: la respuesta de micahwittman ). Además, el JavaScript para el sitio fue bastante fácil de leer ... Ninguno de estos son estrictamente verdaderos, pero TextAreaResizer sigue funcionando bien.

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 tus áreas de texto para crecer / achicarse. Si solo desea que las áreas de texto específicas crezcan o disminuyan, cambie la parte superior para que se lea así:

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

¡Espero que ayude!