jQuery: Chrome textareas y cambiar el tamaño del evento

Question

Chrome hace que las áreas de texto se puedan redimensionar de manera predeterminada. ¿Cómo puedo adjuntar eventos a los eventos de cambio de tamaño para las áreas de texto? Hacer el ingenuo $('textarea').resize(function(){...}) no hace nada.

Answer 1

No parece que pueda adjuntar eventos específicamente para cambiar el tamaño de un área de texto. El evento de cambio de tamaño se dispara cuando se cambia el tamaño de la ventana.

Answer 2

no puedo probar esto ahora, pero de acuerdo con this forum entry se puede desactivar usando:

style="resize: none;" 

a diferencia afirma en esa entrada, y max-widthmax-height no se corte - gracias a @ Jonathan Sampson para la información

Answer 3

Aquí hay un complemento jQuery escrito usando CoffeeScript. Idea de Jonathan Sampson.

$.fn.sizeId = ->               
    return this.height() + "" + this.width()        

$.fn.textAreaResized = (callback) ->          
    this.each ->               
     that = $ this              
     last = that.sizeId() 
     that.mousedown ->             
      last = that.sizeId()           
     that.mousemove ->             
      callback(that.get(0)) if last isnt that.sizeId()    

Se puede construir a tener activado javascript en la página principal del CoffeeScript

http://jashkenas.github.com/coffee-script/

Utilice el botón "Probar CoffeeScript".

Answer 4

Hay jquery-cambiar el tamaño de la que una vez incluyó sólo hace su trabajo línea dada: http://benalman.com/projects/jquery-resize-plugin/

Answer 5

Similar a la respuesta de Epeli He tratado de comenzar en una solución limpia para desencadenar un evento de cambio de tamaño() en mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ Sin embargo, solo funciona con Firefox ya que Chrome no parece desencadenar mousedown en el controlador de cambio de tamaño. Sin embargo, sí activa el mouseup.

Answer 6

Esta es una vieja pregunta, pero alguien tenía el mismo en el IRC, por lo que decidí resolverlo aquí: http://jsfiddle.net/vol7ron/Z7HDn/

derecho de toda persona que Chrome no captura el evento de cambio de tamaño y que Chrome no lo hace capturar el mousedown, por lo que necesita para establecer el estado de inicio y luego manejar los cambios a través de mouseup:

jQuery(document).ready(function(){ 
    // set init (default) state 
    var $test = jQuery('#test'); 

    $test.data('w', $test.outerWidth()); 
    $test.data('h', $test.outerHeight()); 

    $test.mouseup(function(){ 
     var $this = jQuery(this); 
     if ( $this.outerWidth() != $this.data('w') 
     || $this.outerHeight() != $this.data('h') 
     ) 
     alert($this.outerWidth() + ' - ' + $this.data('w') + '\n' 
       + $this.outerHeight() + ' - ' + $this.data('h')); 

     // set new height/width 
     $this.data('w', $this.outerWidth()); 
     $this.data('h', $this.outerHeight()); 
    }); 

}); 

HTML

<textarea id="test"></textarea>