jQuery: Chrome textareas e ridimensiona evento

Question

Chrome rende le aree di testo ridimensionabili per impostazione predefinita. Come posso allegare eventi agli eventi di ridimensionamento per le aree di testo? Fare l'ingenuo $('textarea').resize(function(){...}) non fa nulla.

Answer 1

Non sembra che sia possibile allegare eventi specifici al ridimensionamento di un'area di testo. L'evento di ridimensionamento si attiva quando la finestra viene ridimensionata.

Answer 2

non riesco a provare questo proprio ora, ma secondo this forum entry esso può essere disabilitato utilizzando:

style="resize: none;" 

diversamente dichiarato in quella voce, max-width e max-height non è tagliato - grazie a @ Jonathan Sampson per le informazioni

Answer 3

Ecco un plug-in jQuery scritto utilizzando CoffeeScript. Idea di 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()    

Si può costruire a Javascript sulla homepage del CoffeeScript

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

Utilizzare il pulsante "Prova CoffeeScript".

Answer 4

C'è jquery-ridimensionare che un tempo comprendeva solo rende il vostro dato lavoro linea: http://benalman.com/projects/jquery-resize-plugin/

Answer 5

Simile alla risposta di Epeli Ho cercato di iniziare su una soluzione pulita per innescare un evento resize() su mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ Tuttavia funziona solo con Firefox poiché Chrome non sembra attivare il mouse sul gestore di ridimensionamento. Tuttavia attiva il mouse.

Answer 6

Questa è una vecchia questione, ma qualcun altro ha avuto lo stesso in IRC, così ho deciso di risolverlo qui: http://jsfiddle.net/vol7ron/Z7HDn/

diritto di tutti che Chrome non coglie l'evento resize e che Chrome non lo fa catturare il MouseDown, quindi è necessario impostare lo stato di inizializzazione e quindi gestire i cambiamenti attraverso 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>