textarea 上的 resize() 不会检测到手动调整大小仅以编程方式进行

Question

文本区域在手动调整大小时（具有样式 resize:both）和以编程方式调整大小时需要做一些事情。它以编程方式工作正常，但当用户手动调整大小时就不行了。

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

我读到一些关于 JQuery 中存在错误的信息，检测到 Chrome 中文本区域的手动调整大小。但它在 Firefox 等中也不起作用。此外，当我尝试在父 div 上调用相同的功能（它也会自动调整大小）时，它也不起作用。文本区域有

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

谁能告诉我为什么在手动调整大小时不会触发调整大小事件，我该怎么办？

Answer 1

我没有看到你的源代码清单，你试过 jQuery UI resizable 了吗？它允许用户使用鼠标调整任何 DOM 元素的大小。

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

您的 CSS 调整大小属性可能不起作用的原因可能是您不小心将 "textarea" 中的字母 "a" 大写了。如果你想设置宽高限制，也可以通过：

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

您可以阅读更多相关内容 CSS 调整大小 article

Answer 2

您是否尝试将脚本修改为：

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

我需要看看你的 Javascript 的其余部分，以找出它没有启动的原因。但是您不一定需要使用调整大小功能。尝试将其与 mouseup 事件绑定：

$('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;
    }
});

参见：jsfiddle

textarea 上的 resize() 不会检测到手动调整大小仅以编程方式进行

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

jquery

resize

manual

detect