Cambiar el tamaño del evento para textarea?

Las versiones actuales de Firefox y Chrome incluyen un controlador de arrastre para cambiar el tamaño de un cuadro

Nota:

  1. Podría adjuntar su propio tamaño como lo hizo Hussein, pero si quiere el original, puede usar el código anterior
  2. Como menciona Bryan Downing, esto funciona cuando haces un mouseup mientras tu mouse está en la parte superior de un área de texto; Sin embargo, hay casos en los que puede no ocurrir algo así como cuando un navegador no está maximizado y continúa arrastrando más allá del scope del navegador, o use resize:vertical para bloquear el movimiento.

    Para algo más avanzado, necesitaría agregar otros oyentes, posiblemente una cola y escáneres de intervalo; o para usar mousemove, como creo que jQuery se puede redimensionar, la pregunta entonces es ¿cuánto valoras el rendimiento frente al polaco?


Actualización: desde entonces ha habido un cambio en la interfaz de usuario de los navegadores. Ahora, al hacer doble clic en la esquina, puede contraer el cuadro de texto a su tamaño predeterminado. Por lo tanto, es posible que también deba capturar cambios antes / después de este evento.

Un nuevo estándar para esto es la aplicación Resize Observer, disponible en Chrome Dev 54 detrás de la bandera de características de la plataforma web experimental.

 function outputsize() { width.value = textbox.offsetWidth height.value = textbox.offsetHeight } outputsize() new ResizeObserver(outputsize).observe(textbox) 
 Width: 0
Height: 0

Otra forma de hacerlo es mediante el enlace al evento mouseup en el área de texto. entonces puedes verificar si el tamaño cambió.

Combiné la respuesta de Vol7ron un poco, y simplemente reemplacé la “Acción de Redimensionar Aquí” con un simple disparador del evento de “cambio de tamaño” normal, para que pueda adjuntar lo que quiera que suceda al evento de cambio de tamaño “como de costumbre”:

 $(document).ready(function(){ $('textarea').bind('mouseup mousemove',function(){ if(this.oldwidth === null){this.oldwidth = this.style.width;} if(this.oldheight === null){this.oldheight = this.style.height;} if(this.style.width != this.oldwidth || this.style.height != this.oldheight){ $(this).resize(); this.oldwidth = this.style.width; this.oldheight = this.style.height; } }); }); 

Agregué el evento mousemove para que el cambio de tamaño también se dispare mientras arrastra el mouse mientras se cambia el tamaño, pero tenga en cuenta que se dispara muy a menudo cuando mueve el mouse.

en este caso, es posible que desee retrasar un poco la activación o el manejo del cambio de tamaño, por ejemplo, reemplace lo anterior:

 $(this).resize(); 

con:

 if(this.resize_timeout){clearTimeout(this.resize_timeout);} this.resize_timeout = setTimeout(function(){$(this).resize();},100); 

uso de ejemplo, haga que 2nd textarea crezca y disminuya con la primera:

 $('textarea').eq(0).resize(function(){ var $ta2 = $('textarea').eq(1); $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height')); }); 

El evento de cambio de tamaño no existe para textarea.

El jQueryPlugin rediseñado no parece nativo, por lo que debemos usar una alternativa.

Una forma de emularlo es usar el evento mousedown / click. Si desea desencadenar eventos en tiempo real, puede hacerlo así:

Actualizado el 11 de noviembre de 2013:

 // This fiddle shows how to simulate a resize event on a // textarea // Tested with Firefox 16-25 Linux / Windows // Chrome 24-30 Linux / Windows var textareaResize = function(source, dest) { var resizeInt = null; // the handler function var resizeEvent = function() { dest.outerWidth( source.outerWidth() ); dest.outerHeight(source.outerHeight()); }; // This provides a "real-time" (actually 15 fps) // event, while resizing. // Unfortunately, mousedown is not fired on Chrome when // clicking on the resize area, so the real-time effect // does not work under Chrome. source.on("mousedown", function(e) { resizeInt = setInterval(resizeEvent, 1000/15); }); // The mouseup event stops the interval, // then call the resize event one last time. // We listen for the whole window because in some cases, // the mouse pointer may be on the outside of the textarea. $(window).on("mouseup", function(e) { if (resizeInt !== null) { clearInterval(resizeInt); } resizeEvent(); }); }; textareaResize($("#input"), $("#output")); 

Demostración: http://jsfiddle.net/gbouthenot/D2bZd/

FireFox ahora es compatible con los eventos de MutationObserver en textareas y esto parece funcionar bastante bien. Chrome lamentablemente todavía necesita una solución.

En función de las demás respuestas de esta página, aquí hay una versión actualizada y refactorizada que activa un evento de cambio de tamaño de la ventana cuando se textarea tamaño de un área de textarea .

También agregué un detector de eventos para el mouse que deja la ventana que se necesita en un iFrame para detectar cuando el área de textarea vuelve más grande que el fotogtwig.

 (function(textAreaChanged){ function store(){ this.x = this.offsetWidth; this.y = this.offsetHeight; } function textAreaEvent(){ if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) { textAreaChanged(); store.call(this); } } $('textarea').each(store).on('mouseup mouseout',textAreaEvent); $(window).on('mouseup',textAreaEvent); })(function(){ $(window).trigger('resize'); }); 

En IE9 y superior podemos hacer lo mismo sin jQuery.

 (function(textAreaChanged){ function store(){ this.x = this.offsetWidth; this.y = this.offsetHeight; } function textAreaEvent(){ if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) { textAreaChanged(); store.call(this); } } Array.prototype.forEach.call( document.querySelectorAll('textarea'), function (el){ el.addEventListener('mouseup', textAreaEvent); el.addEventListener('mouseout', textAreaEvent); } ); window.addEventListener('mouseup',textAreaEvent) })(function(){ //trigger window resize var event = document.createEvent('Events'); event.initEvent('resize', true, false); window.dispatchEvent(event); }); 

gracias a MoonLite: su script está funcionando bien, pero a veces, si lo hace aumentando rápidamente, cambie el tamaño del puntero del mouse fuera del área de texto en el mouseup y la función deseada no se desencadena. Así que agregué un evento mouseup en el elemento contenedor para que funcione de manera confiable.

.

 $('textarea_container').bind('mouseup', function() { YourCode ; } ) ;