jQuery : Chrome textareas and resize event

问题:

Chrome makes textareas resizable by default. How can I attach events to the resizing events for the textareas ? Doing the naive $('textarea').resize(function(){...}) does nothing.

回答1:

It doesn't look like you can specifically attach events to resizing a textarea. The resize event fires when the window is resized.

回答2:

I can't test this right now, but according to this forum entry it can be disabled using:

style="resize: none;"

unlike stated in that entry, max-width and max-height won't cut it - thanks to @Jonathan Sampson for the info.

回答3:

Here's a jQuery plugin written using CoffeeScript. Idea from 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()             

You can build it to Javascript on the CoffeeScript's homepage

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

Use the "Try CoffeeScript" button.

回答4:

This is an old question, but someone else had the same one in IRC, so I decided to solve it here: http://jsfiddle.net/vol7ron/Z7HDn/

Everyone's right that Chrome doesn't capture the resize event and that Chrome doesn't capture the mousedown, so you need to set the init state and then handle changes through 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>

回答5:

There is jquery-resize which once included just makes your given line work: http://benalman.com/projects/jquery-resize-plugin/

回答6:

Similar to Epeli's answer I've tried to start on a clean solution to trigger a resize() event on mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ However it only works with Firefox as Chrome doesn't seem to trigger mousedown on the resize handler. However it does trigger mouseup.