javascript - 文本区域的 .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 的大小时，'Yay it worked' 没有出现。

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 大小因其他原因发生变化时，这不会检测；例如，当窗口调整大小时。此外，要使其适用于页面上的每个文本区域，您需要遍历所有文本区域并将它们的尺寸存储在一个对象中，以便您可以检索它们。