jQuery：Chrome 文本区域和调整大小事件

Posted 2023-05-07

【中文标题】jQuery：Chrome 文本区域和调整大小事件

【英文标题】：jQuery : Chrome textareas and resize event

【发布时间】：2011-01-06 23:09:50

【问题描述】：

Chrome 默认会调整文本区域的大小。如何将事件附加到 textareas 的调整大小事件？做天真的$('textarea').resize(function()...) 什么都没做。

【问题讨论】：

您可以检查点击前后的宽度。

【参考方案1】：

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

【参考方案2】：

我现在无法对此进行测试，但根据 this forum entry 可以使用以下命令禁用它：

style="resize: none;"

与该条目中所述不同，max-width 和 max-height 不会删除它 - 感谢@Jonathan Sampson 提供的信息。

【讨论】：

+1 resize:none 禁用它。 max-width 和 max-height 没有：jsbin.com/inane

【参考方案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/

使用“试用 CoffeeScript”按钮。

【参考方案4】：

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

Chrome 没有捕捉到 resize 事件，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>

【参考方案5】：

有一个 jquery-resize，一旦包含它只会让你给定的行工作： http://benalman.com/projects/jquery-resize-plugin/

【参考方案6】：

与 Epeli 的回答类似，我尝试使用一个干净的解决方案来触发鼠标按下时的 resize() 事件：http://jsfiddle.net/cburgmer/jv5Yj/3/ 但是它只适用于 Firefox，因为 Chrome 似乎不会在调整大小处理程序上触发 mousedown。但是它确实会触发 mouseup。