JQuery: Chrome textareas и событие изменения размера

Question

Chrome позволяет изменять размер текстовых областей по умолчанию. Как я могу прикрепить события к событиям изменения размера для текстовых полей? Наивное $('textarea').resize(function(){...}) ничего не делает.

Answer 1

Не похоже, что вы можете специально прикреплять события к изменению размера текстовой области.Событие resize возникает при изменении размера окна.

Answer 2

Я не могу проверить это прямо сейчас, но согласно этой записи на форуме ее можно отключить с помощью:

style="resize: none;"

в отличие от указанного в этой записи, max-width и max-height не будут сокращать его - спасибо @Jonathan Sampson за информацию.

Answer 3

Это старый вопрос, но у кого-то еще был такой же в 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 4

Вот плагин jQuery, написанный с использованием CoffeeScript. Идея от Джонатана Сэмпсона.

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

Вы можете создать его в Javascript на домашней странице CoffeeScript

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

Используйте кнопку «Попробуйте CoffeeScript».

Answer 5

Существует jquery-resize, который после включения просто заставляет работать заданную строку: http://benalman.com/projects/jquery-resize-plugin/

Answer 6

Подобно ответу Эпели, я пытался начать с чистого решения, чтобы вызвать событие resize () при mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ Однако он работает только с Firefox, так как Chrome, похоже, не вызывает mousedown в обработчике изменения размера. Однако это вызывает mouseup.