当用户调整CSS3定义的可调整大小的文本输入时，是否可以捕捉调整大小事件？

Question

我曾经文字输入定义为可调整大小使用CSS，像这样：

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

是否有可能赶上的Javascript（最好是在jQuery的）事件，当用户改变输入？我试过使用标准的jQuery .resize（），但它不工作，因为我想。

感谢您的帮助......

Answer 1

你可以使用鼠标松开事件中使用

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

或。尽管我尝试过在每次调整大小后都会调用它。如果你做一个检查，如果当前的大小是不同的，那么你的代码的最后大小甚至不经常执行。

编辑：

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

可能是宽度（有问题）仍返回旧值，至少在铬

Answer 2

Withou 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);  

Answer 3

你有没有使用jQuery

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