jQuery: Chrome Textareas und Größenanpassung Ereignis

Question

Chrome macht Textareas resizierbar standardmäßig. Wie kann ich Ereignisse an die Größenänderungsereignisse für die Textareas anhängen? Die naive $('textarea').resize(function(){...}) tut nichts.

Answer 1

Es sieht nicht so aus, als könnten Sie Ereignisse zum Ändern der Größe einer Textstelle spezifisch anhängen. Das Größenänderungsereignis wird ausgelöst, wenn die Größe des Fensters geändert wird.

Answer 2

Ich kann das jetzt nicht testen, aber nach this forum entry kann es mit deaktiviert werden:

style="resize: none;" 

anders als in diesem Eintrag angegeben, max-width und max-height wird es nicht schneiden - dank @ Jonathan Sampson für die Info.

Answer 3

Hier ist ein jQuery-Plugin geschrieben mit CoffeeScript. Idee von 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()    

Sie können es auf Javascript auf der Homepage des Coffeescript bauen

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

Verwenden Sie die "Try Coffeescript" -Taste.

Answer 4

Es gibt jquery-Größe ändern, die einmal enthalten nur macht Ihre gegebene Linie Arbeit: http://benalman.com/projects/jquery-resize-plugin/

Answer 5

Ähnlich Epeli Antwort habe ich versucht, auf eine saubere Lösung zu starten Resize() Ereignis auf mousedown- auszulösen: http://jsfiddle.net/cburgmer/jv5Yj/3/ Allerdings funktioniert es nur mit Firefox, da Chrome anscheinend keinen Mausklick auf den Größenänderungs-Handler auslöst. Es löst jedoch Mouseup aus.

Answer 6

Dies ist eine alte Frage, aber jemand anderes hatte das gleiche in IRC, so habe ich beschlossen, es hier zu lösen: http://jsfiddle.net/vol7ron/Z7HDn/

rechts von allen, die Chrome nicht das Resize-Ereignis erfassen und dass Chrome nicht fangen die mousedown-, so dass Sie den init-Zustand zu setzen brauchen, und dann behandeln Änderungen durch 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>