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

Thematic

don't trust w3 schools: w3fools.com – Spreadeagle

anything i can trust? – Thematic

@Thematic developer.mozilla.org/en-US/docs/Web/HTML – Macready

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/

Aut

hey thanks. is there a way to add this easily to all textarea elements in the page. i tried var arr = document.getElementsByTagName ('textarea'); and then iterating arr but didn't work. – Thematic

var text = document.getElementsByTagName ('textarea'); for(var i=0; i<text.length; i++){ text[i].resizable({ resize: function() { alert("AAA"); } }); } – Thematic

yse,$("body").find("textarea").reresizable(.... actual i didnt tested but i has to woek – Unchain

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.

Neomineomycin

Answer 3

A little workaround :

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

Wingate

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.

Stalinsk

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.

Ophthalmology

Answer 6

You can use the ResizeObserver API:

const textarea = document.getElementById('your-textarea');

function onResize() {
  console.log('width:', textarea.offsetWidth);
  console.log('height:', textarea.offsetHeight);
}

new ResizeObserver(onResize).observe(textarea);

Kantor