Функция .resize () для текстовой области

Question

Я хочу сохранить высоту и ширину textarea, когда пользователь меняет его размеры.

Я пытался использовать:

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

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

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

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

});

Но $ .post() функция не была вызвана, поэтому я изменил ее на:

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

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

});

И когда я менял размер textarea, «Да, это сработало» не появилось.

Answer 1

textarea не вызывает событие resize при изменении размера;это для изменения размера окна.Вместо этого вы можете сохранить размер текстовой области вне функции, а затем проверить наличие изменений при отпускании мыши.Примерно так будет работать:

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;
    }
})

Обратите внимание, что он не обнаружит изменения размера textarea по другим причинам;например, когда окно изменяет размеры.Кроме того, чтобы это работало для каждой текстовой области на странице, вам нужно пройтись по ним всем и сохранить их размеры в объекте, чтобы их можно было извлечь.

Answer 2

.resize не работает с элементом textarea.Я только что проверил это сам.Вы можете сделать это;)

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;
    }
});