Is it possible to catch resize event when user resizes text input defined resizable by CSS3?

问题

I have text input defined to be resizable using CSS, like this:

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

Is it possible to catch Javascript (preferrably in jQuery) event when the user resizes input ? I've tried using standart jQuery .resize() but it doesn't work as I suppose to.

Thanks for any help...

回答1:

you can use the mouseup event. as much as i tried it's called after every resize. if you do a check if the current size is different then the last size your code isn't even executed to often.

EDIT:

<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());
});

might be a problem that width() still returns the old value, at least in chrome

回答2:

Have you used element.onresize

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

or using jQuery

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

回答3:

Withou jQuery it will look like this:

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

EDIT1:

And with jQuery, maybe this kind of script will work:

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

As I know, the input should be made resizable, before catching the event with jQuery.

EDIT2:

And in case you want to do this with JS but not using jQuery, try these (browser support could be different).

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

来源：https://stackoverflow.com/questions/8572635/is-it-possible-to-catch-resize-event-when-user-resizes-text-input-defined-resiza

标签

javascript

jquery

css3

resizable