textarea onresize not working

Question

according to w3 schools <textarea> supports onresize however it is not working.

http://www.w3schools.com/jsref/event_onresize.asp

browsers tried:

Chrome 25.0.1364.172

Safari 6.0.3 (7536.28.10)

Firefox 19.0

FIDDLE: http://jsfiddle.net/btevfik/5abR3/

update

as i learned my lesson not to trust w3schools 100%, i found this

https://developer.mozilla.org/en-US/docs/DOM/element.onresize

Answer 1

Textareas don't resize in MOST(ALL) the browsers onresize event is NOT WORKING FOR the window object in this case, you case use jQuery UI plugin:

$("idoftextarea").resizable({
    resize: function() {
        $("id").append("yourcode");
    }
});

Reference: http://jqueryui.com/resizable/

Answer 2

Most browsers only trigger an onresize on the body element.

The best solution I've found so far is the use of the overflow and underflow event listeners in a beautiful hack.

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

It's pure JavaScript.

Answer 3

A little workaround :

$('textarea').bind('mouseup', function() {
    console.log('resized');
});

Answer 4

Just an update to ravula's answer (my reputation is too low for comments):

JQuery adds a bunch of divs to the resizable element. In my case this destroyed the whole layout. You can get rid of the additional margins / padding by using:

.ui-wrapper {
	padding:0px !important;
	margin:0px !important;
	
}

This is certainly not very clean and my cause problems but it worked in my case. I'll update this post if i experience any issues.

Answer 5

I like to stick to vanilla js for whatever reason. so here's a simple solution in vanilla:

<textarea
  onmousedown="storeDimensions(this)"
  onmouseup="onresizeMaybe(this)"
></textarea>

<script>
  function storeDimensions(element){
    element.textWidth = element.offsetWidth;
    element.textHeight = element.offsetHeight;
    element.value = "is it gonna change? we don't know yet...";
  }
  
  function onresizeMaybe(element){
    if (element.textWidth===element.offsetWidth
     && element.textHeight===element.offsetHeight) 
      element.value = "no change.\n";
    else element.value ="RESIZED!\n";
    
    element.value +=
       `width: ${element.textWidth}\n`
      +`height: ${element.textHeight}`;
  }
</script>

and for homework, use onmousemove to trigger the resize event instead of onmouseup (I didn't need that in my particular case).

:) hope it helps someone someday... seeing as how this question is now 5 years old.