Ответ 1

Прежде чем выдать событие изменения размера, вы должны сначала изменить размер текстового поля. Вы можете сделать это с помощью jQuery UI resizable() и внутри него вы можете вызвать событие изменения размера.

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized!</pre>");
    }
});

Проверьте рабочий пример на http://jsfiddle.net/HhSYG/1/

Ответ 2

Это старый вопрос, но у кого-то был тот же самый в IRC, поэтому я решил решить его здесь: http://jsfiddle.net/vol7ron/Z7HDn/

Chrome не фиксирует событие изменения размера и что Chrome не отображает мульдауны, поэтому вам нужно установить состояние init, а затем обрабатывать изменения с помощью мыши:

jQuery(document).ready(function(){
   var $textareas = jQuery('textarea');

   // store init (default) state   
   $textareas.data('x', $textareas.outerWidth());
   $textareas.data('y', $textareas.outerHeight()); 

   $textareas.mouseup(function(){

      var $this = jQuery(this);

      if (  $this.outerWidth()  != $this.data('x') 
         || $this.outerHeight() != $this.data('y') )
      {
          // Resize Action Here
          alert( $this.outerWidth()  + ' - ' + $this.data('x') + '\n' 
               + $this.outerHeight() + ' - ' + $this.data('y')
               );
      }

      // store new height/width
      $this.data('x', $this.outerWidth());
      $this.data('y', $this.outerHeight()); 
   });

});

HTML

<textarea></textarea>
<textarea></textarea>

Примечание:

• Вы можете прикрепить свой собственный размер, как это сделал Хусейн, но если вы хотите его оригинал, вы можете использовать приведенный выше код

• Как упоминает Брайан Даунинг, это работает, когда вы нажимаете мышь, когда ваша мышь находится поверх текстового поля; однако бывают случаи, когда это может не произойти, например, когда браузер не максимизируется, и вы продолжаете выходить за пределы браузера, или используйте resize:vertical для блокировки движения.

  Для чего-то более продвинутого вам нужно добавить других слушателей, возможно, очередей и интервальных сканеров; или использовать mousemove, так как я считаю, что jQuery resizable делает - тогда возникает вопрос, насколько вы цените производительность против полировки?

Обновление:. С тех пор было изменение пользовательского интерфейса браузеров. Теперь двойной щелчок по углу может сжать текстовое поле до его размера по умолчанию. Поэтому вам также может потребоваться захват изменений до/после этого события.

Ответ 3

Другой способ сделать это - привязка к событию mouseup на текстовом поле. то вы можете проверить, изменился ли размер.

Ответ 4

Я смешал vol7ron немного, и просто заменил "Resize Action Here" простым триггером обычного события "resize", чтобы вы могли прикрепить все, что хотите, к событию изменения размера "как обычно":

$(document).ready(function(){
    $('textarea').bind('mouseup mousemove',function(){
        if(this.oldwidth  === null){this.oldwidth  = this.style.width;}
        if(this.oldheight === null){this.oldheight = this.style.height;}
        if(this.style.width != this.oldwidth || this.style.height != this.oldheight){
            $(this).resize();
            this.oldwidth  = this.style.width;
            this.oldheight = this.style.height;
        }
    });
});

Я добавил событие mousemove, так что изменение размера также срабатывает при перетаскивании мыши при изменении размера, но имейте в виду, что он очень часто срабатывает при перемещении мыши.

в этом случае вам может потребоваться небольшая задержка при фактическом запуске или обработке события изменения размера, например. замените выше:

$(this).resize();

с:

if(this.resize_timeout){clearTimeout(this.resize_timeout);}
this.resize_timeout = setTimeout(function(){$(this).resize();},100);

пример использования, сделайте 2-е текстовое поле расти и сжиматься первым:

$('textarea').eq(0).resize(function(){
    var $ta2 = $('textarea').eq(1);
    $('textarea').eq(1).css('width',$ta2.css('width')).css('height',$ta2.css('height'));
});

Ответ 5

Новый стандарт для этого - Resize Observer api, доступный в Chrome Dev 54 за флажком функций экспериментальной веб-платформы.

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me.</textarea>

Ответ 6

Событие изменения размера не существует для текстового поля.

Изменчивый jQueryPlugin не выглядит родным, поэтому мы должны использовать альтернативу.

Один из способов эмулировать это - использовать событие mousedown/click. Если вы хотите запустить событие в реальном времени, вы можете сделать это следующим образом:

Обновлено 11 ноября 2013 года:

// This fiddle shows how to simulate a resize event on a
// textarea
// Tested with Firefox 16-25 Linux / Windows
// Chrome 24-30 Linux / Windows

var textareaResize = function(source, dest) {
    var resizeInt = null;

    // the handler function
    var resizeEvent = function() {
        dest.outerWidth( source.outerWidth() );
        dest.outerHeight(source.outerHeight());
    };

    // This provides a "real-time" (actually 15 fps)
    // event, while resizing.
    // Unfortunately, mousedown is not fired on Chrome when
    // clicking on the resize area, so the real-time effect
    // does not work under Chrome.
    source.on("mousedown", function(e) {
        resizeInt = setInterval(resizeEvent, 1000/15);
    });

    // The mouseup event stops the interval,
    // then call the resize event one last time.
    // We listen for the whole window because in some cases,
    // the mouse pointer may be on the outside of the textarea.
    $(window).on("mouseup", function(e) {
        if (resizeInt !== null) {
            clearInterval(resizeInt);
        }
        resizeEvent();
    });
};

textareaResize($("#input"), $("#output"));

Демо: http://jsfiddle.net/gbouthenot/D2bZd/

Ответ 7

FireFox теперь поддерживает события MutationObserver в текстовых областях, и это, похоже, работает очень хорошо. Chrome, к сожалению, все еще нуждается в обходном пути.

На основе других ответов на этой странице, здесь обновлена ​​и обновлена ​​версия, которая запускает событие изменения размера окна при изменении размера textarea.

Я также добавил прослушиватель событий для мыши, оставляя окно, которое необходимо в iFrame, чтобы обнаружить, когда textarea становится больше, чем кадр.

(function(textAreaChanged){
    function store(){
        this.x = this.offsetWidth;
        this.y = this.offsetHeight;
    }

    function textAreaEvent(){
        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
            textAreaChanged();
            store.call(this);
        }
    }

    $('textarea').each(store).on('mouseup mouseout',textAreaEvent);

    $(window).on('mouseup',textAreaEvent);

})(function(){
    $(window).trigger('resize');
});

В IE9 и выше мы можем сделать то же самое без jQuery.

(function(textAreaChanged){
    function store(){
        this.x = this.offsetWidth;
        this.y = this.offsetHeight;
    }

    function textAreaEvent(){
        if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
            textAreaChanged();
            store.call(this);
        }
    }

    Array.prototype.forEach.call(
        document.querySelectorAll('textarea'),
        function (el){
            el.addEventListener('mouseup',   textAreaEvent);
            el.addEventListener('mouseout',  textAreaEvent);
        }
    );

    window.addEventListener('mouseup',textAreaEvent)

})(function(){
    //trigger window resize
    var event = document.createEvent('Events');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
});

Ответ 8

благодаря MoonLite - ваш script работает нормально, но иногда, если вы делаете быстрое увеличение размера, указатель мыши находится за пределами области textarea на кнопке мыши, и желаемая функция не запускается. Поэтому я добавил событие mouseup для содержащего элемента, чтобы сделать его работоспособным.

.
  

 
        $('textarea_container').bind('mouseup', function()
        { YourCode ; } ) ;