Search code examples
javascriptjquerycssresizable

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...

Solution

  • 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