jQuery：Chrome textareas和調整大小事件

Question

Chrome使textareas默認可調整大小。如何將事件附加到textareas的調整大小事件？做天真的$('textarea').resize(function(){...})什麼都不做。

Answer 1

它看起來不像你可以特別附加事件來調整文本區域大小。調整窗口大小時觸發resize事件。

Answer 2

我現在不能測試此權利，但根據this forum entry它可以使用被禁用：

style="resize: none;" 

不像在該條規定，max-width和max-height不會削減它 - 感謝@Jonathan桑普森爲信息。

Answer 3

這是一個使用CoffeeScript編寫的jQuery插件。喬納森桑普森的想法。

$.fn.sizeId = ->               
    return this.height() + "" + this.width()        

$.fn.textAreaResized = (callback) ->          
    this.each ->               
     that = $ this              
     last = that.sizeId() 
     that.mousedown ->             
      last = that.sizeId()           
     that.mousemove ->             
      callback(that.get(0)) if last isnt that.sizeId()    

你可以把它打造爲Javascript在CoffeeScript的主頁

http://jashkenas.github.com/coffee-script/

使用 「嘗試的CoffeeScript」 按鈕。

Answer 4

有jQuery的調整曾經列入只是讓你給出的老本行： http://benalman.com/projects/jquery-resize-plugin/

Answer 5

到埃佩利的答案類似我試圖啓動一個乾淨的解決方案，以在鼠標按下觸發一個resize（）事件：http://jsfiddle.net/cburgmer/jv5Yj/3/ 然而，它只適用於Firefox，因爲Chrome似乎沒有觸發調整大小處理程序上的mousedown。但它確實會觸發mouseup。

Answer 6

這是一個老問題，但其他人曾在IRC同一個，所以我決定在這裏解決了這樣一個現實：Chrome不捕捉resize事件http://jsfiddle.net/vol7ron/Z7HDn/

每個人的權利，Chrome不捕捉鼠標按下，所以你需要設置初始化狀態，然後經過處理的mouseup改變：

jQuery(document).ready(function(){ 
    // set init (default) state 
    var $test = jQuery('#test'); 

    $test.data('w', $test.outerWidth()); 
    $test.data('h', $test.outerHeight()); 

    $test.mouseup(function(){ 
     var $this = jQuery(this); 
     if ( $this.outerWidth() != $this.data('w') 
     || $this.outerHeight() != $this.data('h') 
     ) 
     alert($this.outerWidth() + ' - ' + $this.data('w') + '\n' 
       + $this.outerHeight() + ' - ' + $this.data('h')); 

     // set new height/width 
     $this.data('w', $this.outerWidth()); 
     $this.data('h', $this.outerHeight()); 
    }); 

}); 

HTML

<textarea id="test"></textarea>