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

默认情况下，Chrome可以调整文本区域的大小。如何将事件附加到文本区域的调整大小事件？执行naive

$（'textarea'）.resize（function（）{…}）

没有任何作用。

我现在无法测试这一点，但根据我的经验，可以使用以下方法禁用它：

style="resize: none;"

---

与该条目中所述不同，

max width

和

max height

不会剪切它-多亏了@Jonathan Sampson提供的信息。

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

下面是一个使用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()             

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

---

使用“尝试咖啡脚本”按钮

有一个jquery resize，它一经包含，只会使您的给定行正常工作：

---

与Epeli的回答类似，我尝试从一个干净的解决方案开始，在mousedown上触发resize（）事件：

---

不过，它只适用于Firefox，因为Chrome似乎不会在resize处理程序上触发mousedown。但是，它确实会触发鼠标悬停。

这是一个老问题，但其他人在IRC中也有同样的问题，所以我决定在这里解决它：

每个人都认为Chrome不会捕获调整大小事件，Chrome不会捕获鼠标向下移动，因此您需要设置初始化状态，然后通过鼠标操作来处理更改：

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

您可以在单击前后检查宽度。+1

调整大小：无

禁用它<代码>最大宽度和

最大高度

没有：

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