Implementando un área de texto redimensionable?

Question

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

¿Es eso algo que ellos mismos lanzaron o es un componente disponible públicamente que puedo adjuntar fácilmente a las áreas de texto de mis sitios?

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

autosizing-textarea

Eso habla más sobre el cambio de tamaño de forma automática áreas de texto mientras que yo quiero la pequeña asir-área que puede arrastrar hacia arriba y abajo.

Answer 1

StackOverflow utiliza un complemento jQuery para lograr esto: TextAreaResizer.

Es bastante fácil de verificar esto, simplemente extraiga the JS archivos del sitio.

Nota histórica: cuando esta respuesta fue escrito originalmente, ADM y TextAreaResizer eran dos plugins separados, ninguno de los cuales fue escrito por el Dev Team SO (véase también: micahwittman's answer). Además, el JavaScript para el sitio fue bastante fácil de leer ... Ninguno de estos son estrictamente verdadero ya, pero TextAreaResizer sigue funcionando bien.

Answer 2

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

Answer 3

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

Answer 4

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

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

Espero que ayude!

Answer 5

qué pasa con esto, su trabajo

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