I want to notify when the size of textarea changes, what event happens at that time, how can I detect it?
4 Answers
Here is a small example using pure (without jQuery etc. dependencies) Javascript.
It's using mouseup and keyup handlers and an 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 it in action on jsfiddle.net/pyaNS.
You can use library agnostic JavaScript (assuming you're not using jQuery or are using another library) by doing:
<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've included a console log of the element so you can see which events you can tap into in your inspector.
-
But if the size of textarea automatically changes(for example like facebook comment textarea) I cant detect, any idea? Jun 5, 2013 at 11:31
-
those types of changes are done by JavaScript so there should be an event firing that you can add to but if you're not able to amend that you can set an interval to check the height– grahamJun 5, 2013 at 11:37
You can intercept the mouse events of the user, when he tries to change the size of the textarea.
1: Element.addEventListener("mousedown", event => {})
: Start interception.
2: window.addEventListener("mousemove", event => {})
: Here a comparison between the previous and the current size of each move event take place.
window.addEventListener("mouseup", event => {})
: Stop interception.
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());
});
});
Cannot make it in pure javascript
we must use jQuery