Можно ли перехватить событие изменения размера, когда пользователь изменяет размер текстового ввода, определенного изменяемого размера CSS3?

Question

У меня есть текстовый ввод, определенный для изменения размера с помощью CSS, например:

#text_input { resize:horizontal; }
<input type="text" id="text_input" />

Возможно ли перехватить событие Javascript (предпочтительно в jQuery), когда пользователь изменяет размер ввода?Я пытался использовать стандартный jQuery .resize (), но он не работает, как я полагаю.

Спасибо за любую помощь ...

Answer 1

Использовали ли вы element.onresize

https://developer.mozilla.org/en/DOM/element.onresize

или используете jQuery

http://api.jquery.com/resize/

Answer 2

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

РЕДАКТИРОВАТЬ:

<textarea name="bla" id="bla"></textarea>

$('#bla').bind('mouseup', function(e){
  if($(e.currentTarget).data('lastWidth') != $(e.currentTarget).width()){
    console.log("resize!");
  }
  $(e.currentTarget).data('lastWidth', $(e.currentTarget).width());
});

может быть проблемой, что width ()по-прежнему возвращает старое значение, по крайней мере, в Chrome

Answer 3

Без jQuery это будет выглядеть так:

<input type="text" id="text_input" onresize="alert('You have changed the size of the window')"/>

EDIT1:

А с jQuery, возможно, будет работать такой скрипт:

$("text_input").resizable({
    resize: function() {
       //do something
    }
});

Как я знаю, ввод должен быть изменен, прежде чем перехватывать событие с помощью jQuery.

EDIT2:

И если вы хотите сделать это с JS, но не с помощью jQuery, попробуйте это (поддержка браузера может отличаться).

var object=document.getElementById("text_input");
object.onresize = handler;  
object.addEventListener ("resize", handler, useCapture);