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(){
var $textareas = jQuery('textarea');
// store init (default) state
$textareas.data('x', $textareas.outerWidth());
$textareas.data('y', $textareas.outerHeight());
$textareas.mouseup(function(){
var $this = jQuery(this);
if ( $this.outerWidth() != $this.data('x')
|| $this.outerHeight() != $this.data('y') )
{
// Resize Action Here
alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n'
+ $this.outerHeight() + ' - ' + $this.data('y')
);
}
// store new height/width
$this.data('x', $this.outerWidth());
$this.data('y', $this.outerHeight());
});
});
HTML
<textarea></textarea>
<textarea></textarea>
You can test on JSFiddle
Note:
- You could attach your own resizable as Hussein has done, but if you want the original one, you can use the above code
- As Bryan Downing mentions, this works when you mouseup while your mouse is on top of a textarea; however, there are instances where that might not happen like when a browser is not maximized and you continue to drag beyond the scope of the browser, or use
resize:vertical
to lock movement.
For something more advanced you’d need to add other listeners, possibly a queue and interval scanners; or to use mousemove, as I believe jQuery resizable does — the question then becomes how much do you value performance vs polish?
Update: There’s since been a change to Browsers’ UI. Now double-clicking the corner may contract the textbox to its default size. So you also may need to capture changes before/after this event as well.