jQuery: Chrome textareas và thay đổi kích thước sự kiện

Question

Chrome làm cho văn bản có thể thay đổi kích thước theo mặc định. Làm thế nào tôi có thể đính kèm các sự kiện vào các sự kiện thay đổi kích cỡ cho textareas? Làm ngây thơ $('textarea').resize(function(){...}) không làm gì cả.

Answer 1

Có vẻ như bạn không thể đính kèm cụ thể các sự kiện để thay đổi kích thước vùng văn bản. Sự kiện thay đổi kích cỡ sẽ kích hoạt khi cửa sổ được thay đổi kích thước.

Answer 2

tôi không thể kiểm tra này ngay bây giờ, nhưng theo this forum entry nó có thể được vô hiệu hóa sử dụng:

style="resize: none;" 

không giống như được nêu trong entry đó, max-width và max-height sẽ không cắt nó - nhờ @ Jonathan Sampson Cho thông tin.

Answer 3

Đây là một plugin jQuery được viết bằng CoffeeScript. Ý tưởng từ 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()    

Bạn có thể xây dựng nó để javascript trên trang chủ của CoffeeScript

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

Sử dụng "Thử CoffeeScript" nút.

Answer 4

Có jquery-thay đổi kích thước mà một lần bao gồm chỉ làm cho công việc của bạn cho dòng: http://benalman.com/projects/jquery-resize-plugin/

Answer 5

Tương tự như câu trả lời Epeli của tôi đã cố gắng để bắt đầu về một giải pháp sạch để kích hoạt một sự kiện thay đổi kích thước() trên mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ Tuy nhiên, nó chỉ hoạt động với Firefox vì Chrome dường như không kích hoạt mousedown trên trình xử lý thay đổi kích thước. Tuy nhiên nó kích hoạt mouseup.

Answer 6

Đây là một câu hỏi cũ, nhưng người khác có cùng một trong IRC, vì vậy tôi đã quyết định để giải quyết nó ở đây: http://jsfiddle.net/vol7ron/Z7HDn/

đúng của mọi người rằng Chrome không nắm bắt được sự kiện thay đổi kích thước và Chrome thì không nắm bắt được mousedown, vì vậy bạn cần phải thiết lập trạng thái init và sau đó xử lý thay đổi thông qua 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>