resize() on a textarea doesn't detect manual resizing only programmatical

Question

a textarea needs to do something when it is resized either manually (is has style resize:both) and when it is resized programmatically. It works fine programmatically, but not when user manually resizes.

textarea.resize( function(tn,newh,scroll){
                    console.log('resize');
                    ....... );
                });

I read something about that there was a bug in JQuery, with detecting manual resizing of textareas in Chrome. But is also doesn't work in Firefox etc. Also when I try to evoke same function on the parent-div (which automatically resizes as well), it also doesn't work. The text areas have

    textArea.css('resize','both');
    textArea.css('overflow','auto');

Can anybody tell why the resize event would not fire when manually resized , and what can I do about it?

Have you read the selected answer [here](http://stackoverflow.com/questions/5570390/resize-event-for-textarea)? — Roamer-1888, Feb 24 '15 at 01:13

score 2 · Accepted Answer · edited Jun 26 '17 at 12:32

2

Did you try modifying your script to:

$("textarea").resizable({
    resize:function(){
       $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    }
})

I'll need to see the rest of your Javascript to find out why it's not firing. But you don't necessary need to use the resize function. Try binding it with the mouseup event:

$('textarea').bind('mouseup',function(){
    if(this.style.width != this.outerWidth || this.style.height != this.outerHeight){
        $(this).resize();
        this.outerWidth  = this.style.width;
        this.outerHeight = this.style.height;
    }
});

See: jsfiddle

edited Jun 26 '17 at 12:32

savedario

902
15
26

answered Feb 24 '15 at 04:22

Nicki Chen

96
5

Thanks I used the bind mouseup alternative. In the end it was actually useful to have a difference between programmatic and manual resize event. Thanks again! – Jenita Feb 24 '15 at 11:32

score 1 · Answer 2 · edited Sep 16 '15 at 19:11

1

I don't see your source code listing, did you try jQuery UI resizable? It allows the user to use the mouse to resize any DOM elements.

$(function() {
    $( "textarea" ).resizable();
});

The reason why your CSS resize property may not work may be that you accidentally capitalized the letter "a" in "textarea". If you want to set width and height constraints, you can also do so by:

textarea { 
    resize:vertical; max-height:200px; min-height:100px; 
}

You can read more on this CSS resize article

edited Sep 16 '15 at 19:11

Joe Johnston

2,794
2
31
54

answered Feb 24 '15 at 02:04

Nicki Chen

96
5

Hi, No sorry for the confusion. The resize property does work. But the resize event is not fired when the user manually resizes the textArea. textArea was just the variable name in javascript with which I set those css properties 'resize' and 'overflow'. My problem is when I try to bind the resize event with textArea.resize(). – Jenita Feb 24 '15 at 02:23

resize() on a textarea doesn't detect manual resizing only programmatical

2 Answers2