Symbolic :
I wrote this answer to another version of the same question. looks like it's old news in here. I like to stick to vanilla js for whatever reason, so here's a tidy little solution in vanilla:\n\n\r\n\r\n<textarea\r\n onmousedown=\"storeDimensions(this)\"\r\n onmouseup=\"onresizeMaybe(this)\"\r\n></textarea>\r\n\r\n<script>\r\n function storeDimensions(element){\r\n element.textWidth = element.offsetWidth;\r\n element.textHeight = element.offsetHeight;\r\n element.value = \"is it gonna change? we don't know yet...\";\r\n }\r\n \r\n function onresizeMaybe(element){\r\n if (element.textWidth===element.offsetWidth\r\n && element.textHeight===element.offsetHeight) \r\n element.value = \"no change.\\n\";\r\n else element.value =\"RESIZED!\\n\";\r\n \r\n element.value +=\r\n `width: ${element.textWidth}\\n`\r\n +`height: ${element.textHeight}`;\r\n }\r\n</script>",
2020-05-29T05:48:39
seanmart :
I find that a mousemove event and a setTimeout combined work nicely for this.\nlet el = document.querySelector('textarea')\nlet resizeFn = ()=>{}\nlet timeout = null\n\nel.addEventListener('mousemove',()=>{\n timeout && clearTimeout(timeout)\n timeout = setTimeout(resizeFn,250)\n })\n",
2021-05-14T16:51:42
hires125 :
Not as beautiful and dynamic but it works as expected.\n$('.classname').mouseup(function(){\n $('.classname').css('height', $(this).height());\n});\n",
2021-07-21T12:02:24
Krishan :
thanks to MoonLite - Your script is working fine, but sometimes, if You do a quick increasing-resize the mouse pointer is outside the textarea on mouseup and the wished function is not triggered. So I added a mouseup event on the containing element to make it work reliable.\n\n.\n \n $('textarea_container').bind('mouseup', function()\n { YourCode ; } ) ;\n \n'",
2013-06-15T07:12:15
David Bradshaw :
FireFox now supports MutationObserver events on textareas and this seems to work quite well. Chrome sadly still needs a workaround.\n\nBased on the other answers on this page, here's a refactored and updated version, that triggers a window resize event when a textarea is resized. \n\nI've also added an event listener for the mouse leaving the window which is needed in an iFrame to detect when the textarea becomes larger than the frame.\n\n(function(textAreaChanged){\n function store(){\n this.x = this.offsetWidth;\n this.y = this.offsetHeight;\n }\n\n function textAreaEvent(){\n if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {\n textAreaChanged();\n store.call(this);\n }\n }\n\n $('textarea').each(store).on('mouseup mouseout',textAreaEvent);\n\n $(window).on('mouseup',textAreaEvent);\n\n})(function(){\n $(window).trigger('resize');\n});\n\n\nIn IE9 and above we can do the same without jQuery.\n\n(function(textAreaChanged){\n function store(){\n this.x = this.offsetWidth;\n this.y = this.offsetHeight;\n }\n\n function textAreaEvent(){\n if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {\n textAreaChanged();\n store.call(this);\n }\n }\n\n Array.prototype.forEach.call(\n document.querySelectorAll('textarea'),\n function (el){\n el.addEventListener('mouseup', textAreaEvent);\n el.addEventListener('mouseout', textAreaEvent);\n }\n );\n\n window.addEventListener('mouseup',textAreaEvent)\n\n})(function(){\n //trigger window resize\n var event = document.createEvent('Events');\n event.initEvent('resize', true, false);\n window.dispatchEvent(event);\n});\n",
2015-06-21T23:20:36
Daniel Herr :
A standard way to handle element's resizing is the Resize Observer api, available in all modern web browser versions.\n\r\n\r\nfunction outputsize() {\n width.value = textbox.offsetWidth\n height.value = textbox.offsetHeight\n}\noutputsize()\n\nnew ResizeObserver(outputsize).observe(textbox)\r\nWidth: <output id=\"width\">0</output><br>\nHeight: <output id=\"height\">0</output><br>\n<textarea id=\"textbox\">Resize me.</textarea>",
2016-09-04T00:57:03
vol7ron :
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:\njQuery(document).ready(function(){\n var $textareas = jQuery('textarea');\n\n // store init (default) state \n $textareas.data('x', $textareas.outerWidth());\n $textareas.data('y', $textareas.outerHeight()); \n\n $textareas.mouseup(function(){\n\n var $this = jQuery(this);\n\n if ( $this.outerWidth() != $this.data('x') \n || $this.outerHeight() != $this.data('y') )\n {\n // Resize Action Here\n alert( $this.outerWidth() + ' - ' + $this.data('x') + '\\n' \n + $this.outerHeight() + ' - ' + $this.data('y')\n );\n }\n \n // store new height/width\n $this.data('x', $this.outerWidth());\n $this.data('y', $this.outerHeight()); \n });\n\n});\n\nHTML\n<textarea></textarea>\n<textarea></textarea>\n\nYou can test on JSFiddle\nNote:\n\nYou could attach your own resizable as Hussein has done, but if you want the original one, you can use the above code\nAs 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.\n\nFor 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?\n\nUpdate: 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.",
2011-08-14T05:38:35
MoonLite :
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\":\n\n$(document).ready(function(){\n $('textarea').bind('mouseup mousemove',function(){\n if(this.oldwidth === null){this.oldwidth = this.style.width;}\n if(this.oldheight === null){this.oldheight = this.style.height;}\n if(this.style.width != this.oldwidth || this.style.height != this.oldheight){\n $(this).resize();\n this.oldwidth = this.style.width;\n this.oldheight = this.style.height;\n }\n });\n});\n\n\nI 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.\n\nin this case you might want to put a little delay in actually triggering or handling the resizing event, e.g.\nreplace the above:\n\n$(this).resize();\n\n\nwith:\n\nif(this.resize_timeout){clearTimeout(this.resize_timeout);}\nthis.resize_timeout = setTimeout(function(){$(this).resize();},100);\n\n\nexample usage, make 2nd textarea grow and shrink with the first one:\n\n$('textarea').eq(0).resize(function(){\n var $ta2 = $('textarea').eq(1);\n $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));\n});\n",
2013-05-31T01:56:34
Guy :
another way to do it is by binding to the mouseup event on the textarea. then you can check if size changed. ",
2012-04-18T21:27:44
megar :
Resize event doesn't exist for textarea.\nThe resizeable jQueryPlugin doesn't look native, so we must use alternative.\nOne way to emulate it is to use the mousedown/click event.\nIf you want real-time event triggering, you can do it like this:\nUpdated november 11, 2013:\n// This fiddle shows how to simulate a resize event on a\n// textarea\n// Tested with Firefox 16-25 Linux / Windows\n// Chrome 24-30 Linux / Windows\n\nvar textareaResize = function(source, dest) {\n var resizeInt = null;\n \n // the handler function\n var resizeEvent = function() {\n dest.outerWidth( source.outerWidth() );\n dest.outerHeight(source.outerHeight());\n };\n\n // This provides a "real-time" (actually 15 fps)\n // event, while resizing.\n // Unfortunately, mousedown is not fired on Chrome when\n // clicking on the resize area, so the real-time effect\n // does not work under Chrome.\n source.on("mousedown", function(e) {\n resizeInt = setInterval(resizeEvent, 1000/15);\n });\n\n // The mouseup event stops the interval,\n // then call the resize event one last time.\n // We listen for the whole window because in some cases,\n // the mouse pointer may be on the outside of the textarea.\n $(window).on("mouseup", function(e) {\n if (resizeInt !== null) {\n clearInterval(resizeInt);\n }\n resizeEvent();\n });\n};\n \ntextareaResize($("#input"), $("#output"));\n\nDemo : http://jsfiddle.net/gbouthenot/D2bZd/",
2012-12-30T14:08:41