Resize event for textarea?

I mixed vol7ron's answer up a bit, and just replaced the "Resize Action Here" with a simple trigger of the normal "resize" event, so you can attach whatever you want to happen to the resize event "as usual":

$(document).ready(function(){
    $('textarea').bind('mouseup mousemove',function(){
        if(this.oldwidth  === null){this.oldwidth  = this.style.width;}
        if(this.oldheight === null){this.oldheight = this.style.height;}
        if(this.style.width != this.oldwidth || this.style.height != this.oldheight){
            $(this).resize();
            this.oldwidth  = this.style.width;
            this.oldheight = this.style.height;
        }
    });
});

I added the mousemove event so the resizing also fires while dragging the mouse around while resizing, but keep in mind that it fires very often when you move the mouse around.

in this case you might want to put a little delay in actually triggering or handling the resizing event, e.g. replace the above:

$(this).resize();

with:

if(this.resize_timeout){clearTimeout(this.resize_timeout);}
this.resize_timeout = setTimeout(function(){$(this).resize();},100);

example usage, make 2nd textarea grow and shrink with the first one:

$('textarea').eq(0).resize(function(){
    var $ta2 = $('textarea').eq(1);
    $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));
});

A standard way to handle element's resizing is the Resize Observer api, available in all modern web browser versions.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>

If you need to deal with old versions of Chrome and Firefox (others untested), Mutation Observer can be used to detect the change of the style attribute.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new MutationObserver(outputsize).observe(textbox, {
 attributes: true, attributeFilter: [ "style" ]
})

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>

Resize Observer

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

Spec: https://wicg.github.io/ResizeObserver

Current Support: http://caniuse.com/#feat=resizeobserver

Polyfills: https://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer

another way to do it is by binding to the mouseup event on the textarea. then you can check if size changed.

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:

1. You could attach your own resizable as Hussein has done, but if you want the original one, you can use the above code
2. 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.