.resize() function for textarea

Question

I want to save the height and width of the textarea when the user change it's dimensions.

I've tried to use:

$('textarea').resize(function() {

    var height = $('textarea').css('height');

    var width = $('textarea').css('width');

    $.post('vocabresize.php?height=' + height + '&&width=' + width, function() {});

});

But the $.post() function hasn't been called, so I changed it to:

$('textarea').resize(function() {

    $('body').html('Yay it worked');

});

And when I was changing size of textarea the 'Yay it worked' didn't appeared.

So one code smell is that you are using `$.post()` without post data. You're sending data with a url query string. — Taplar, Nov 12 '18 at 17:38
Possible duplicate of [Resize event for textarea?](https://stackoverflow.com/questions/5570390/resize-event-for-textarea) — Ian, Nov 12 '18 at 17:40
You also have `&&width=` which would be an invalid url string — Taplar, Nov 12 '18 at 17:40

score 1 · Answer 1 · answered Nov 12 '18 at 17:51

textarea doesn't fire a resize event when resized; that is for resizing the window. Instead, you can store the size of the textarea outside the function, and then check for changes when the mouse is released. Something like so would work:

let myTextArea = $('#myTextArea');
let oldHeight = myTextArea.height();
let oldWidth = myTextArea.width();

myTextArea.mouseup(function() {
    let newHeight = $(this).height();
    let newWidth = $(this).width();
    if(newHeight !== oldHeight || newWidth !== oldWidth) {
        console.log("Text area was resized!");
        oldHeight = newHeight;
        oldWidth = newWidth;
    }
})

Note that this won't detect when the textarea size changes for other reasons; for example when the window resizes. Also, to make it work for every text area on the page, you'd need to loop through them all and store their dimensions in an object so you could retrieve them.

Frank Roth · Answer 2 · 2018-11-12T17:54:06.447

0

.resize does not work on a textarea element. I've just tested it myself. You can do this ;)

var textareaWidth;
var textareaHeight;
$('textarea').mouseup(function(evt) {
    if(this.clientWidth != textareaWidth || this.clientHeight != textareaHeight) {
        console.log(`new size= ${this.clientWidth} x ${this.clientHeight}`);
        textareaWidth = this.clientWidth;
        textareaHeight = this.clientHeight;
    }
});

edited Nov 12 '18 at 17:54

answered Nov 12 '18 at 17:45

Frank Roth

6,191
3
25
33

@Taplar I mean `.resize()` does not work on a textarea element. – Frank Roth Nov 12 '18 at 17:47
I've fixed it with two helper variables. – Frank Roth Nov 12 '18 at 17:54

.resize() function for textarea

2 Answers2