How to detect textarea resizing using pure javascript?

Question

I want to tell you when the size of the text field changes, what event is happening at this time, how to detect it?

Answer 1

Here is a small example using pure (without jQuery, etc. dependencies) Javascript.

It uses mouseup and keyup handlers and optional intervall to detect changes.

var detectResize = (function() { function detectResize(id, intervall, callback) { this.id = id; this.el = document.getElementById(this.id); this.callback = callback || function(){}; if (this.el) { var self = this; this.width = this.el.clientWidth; this.height = this.el.clientHeight; this.el.addEventListener('mouseup', function() { self.detectResize(); }); this.el.addEventListener('keyup', function() { self.detectResize(); }); if(intervall) setInterval(function() { self.detectResize(); }, intervall); } return null; } detectResize.prototype.detectResize = function() { if (this.width != this.el.clientWidth || this.height != this.el.clientHeight) { this.callback(this); this.width = this.el.clientWidth; this.height = this.el.clientHeight; } }; return detectResize; })(); 

Usage: new detectResize(element-id, intervall in ms or 0, callback function)

Example:

 <textarea id="mytextarea"></textarea> <script type="text/javascript"> var mytextarea = new detectResize('mytextarea', 500, function() { alert('changed'); }); </script> 

See jsfiddle.net/pyaNS in action.

Answer 2

You can use agnostic library JavaScript (assuming you are not using jQuery or using another library):

 <textarea id="t"></textarea> <script> var t = document.getElementById('t'), tHeight = t.clientHeight, tWidth = t.clientWidth; console.log(t); t.onmouseup = function (e) { if (tHeight !== t.clientHeight || tWidth !== t.clientWidth ) { console.log('size change'); tHeight = t.clientHeight; tWidth = t.clientWidth; } }; </script> 

I turned on the console log of the item so you can see what events you can use in your inspector.

Answer 3

You can capture user mouse events when he tries to resize a text field.

1: Element .addEventListener("mousedown", event => {}) : start interception.

2: window .addEventListener("mousemove", event => {}) : Here, a comparison is made between the previous and current size of each move event.

3. window .addEventListener("mouseup", event => {}) : stop interception.

demo: https://codepen.io/martinwantke/pen/QaJqgq

Answer 4

Try this demo.

http://jsfiddle.net/vol7ron/Z7HDn/

 jQuery(document).ready(function(){ var $textareas = jQuery('textarea'); // set 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') ) { alert( $this.outerWidth() + ' - ' + $this.data('x') + '\n' + $this.outerHeight() + ' - ' + $this.data('y') ); } // set new height/width $this.data('x', $this.outerWidth()); $this.data('y', $this.outerHeight()); }); }); 

---

Unable to do this in pure javascript we must use jQuery