textarea上的resize()不檢測手動調整大小只是programmatical

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


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需要在手動調整大小(具有樣式調整大小:兩者)以及以編程方式調整大小時執行某些操作。它以編程方式工作正常,但不是在用戶手動調整大小時。

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

我讀到了一些關於JQuery中存在錯誤的信息,檢測到Chrome中手動調整textareas的大小。但是在Firefox等也不起作用。當我嘗試在parent-div上喚起相同的功能(它也自動調整大小)時,它也不起作用。文本區域有

    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?

任何人都可以告訴為什么手動調整大小時調整大小事件不會觸發,我該怎么辦呢?

2 个解决方案

#1


1  

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:

我需要看看你的Javascript的其余部分,以找出它沒有解雇的原因。但是您不必使用resize函數。嘗試將其與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;
    }
});

See: jsfiddle

#2


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.

我沒有看到您的源代碼列表,您是否嘗試過jQuery UI可調整大小?它允許用戶使用鼠標來調整任何DOM元素的大小。

$(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:

您的CSS調整大小屬性可能不起作用的原因可能是您不小心將“textarea”中的字母“a”大寫。如果要設置寬度和高度約束,還可以通過以下方式執行此操作:

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

You can read more on this CSS resize article

您可以閱讀有關此CSS調整大小文章的更多信息


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/02/24/7254d74d7da9d75d167b9257d5cac7d2.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com