Question

Chrome默认情况下可以调整textareas的大小。如何将事件附加到textareas的调整大小事件？做天真的$('textarea').resize(function(){...})什么都不做。

Answer 1

看起来您不能专门附加事件来调整textarea的大小。调整窗口大小时会触发resize事件。

Answer 2

我现在无法测试，但根据this forum entry，可以使用以下方法禁用它：

style="resize: none;"

与该条目不同，max-width和max-height不会削减它 - 感谢@Jonathan Sampson的信息。

Answer 3

这是一个使用CoffeeScript编写的jQuery插件。 Jonathan Sampson的想法。

$.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()

您可以在CoffeeScript的主页上将其构建为Javascript

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

使用“Try CoffeeScript”按钮。

Answer 4

这是一个老问题，但是其他人在IRC中有同样的问题，所以我决定在此解决：http://jsfiddle.net/vol7ron/Z7HDn/

每个人都认为Chrome无法捕获调整大小事件且Chrome无法捕获mousedown，因此您需要设置init状态，然后通过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>

Answer 5

有jquery-resize，曾经包含只是使你的给定行工作： http://benalman.com/projects/jquery-resize-plugin/

Answer 6

与Epeli的答案类似，我试图开始使用干净的解决方案来触发mousedown上的resize（）事件：http://jsfiddle.net/cburgmer/jv5Yj/3/ 但它只适用于Firefox，因为Chrome似乎不会在调整大小处理程序上触发mousedown。但它会触发鼠标。

jQuery：Chrome textareas和resize活动

6 个答案: