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

Posted

技术标签:

【中文标题】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-widthmax-height 不会删除它 - 感谢@Jonathan Sampson 提供的信息。

【讨论】:

+1 resize:none 禁用它。 max-widthmax-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。

【讨论】:

以上是关于jQuery:Chrome 文本区域和调整大小事件的主要内容,如果未能解决你的问题,请参考以下文章

根据内容自动调整文本区域的大小[重复]

div 可像文本区域一样调整大小

实现可调整大小的文本区域?

如何在移动设备上调整灵活文本区域的大小?

如何使用原型自动调整文本区域的大小?

阻止文本区域在 Safari 中调整大小