Question

我将文本输入定义为可以使用CSS调整大小，如下所示：

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

当用户调整输入大小时，是否可以捕获Javascript（最好是在jQuery中）事件？我尝试过使用标准的jQuery .resize（），但它并没有像我想的那样工作。

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

Answer 1

使用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 2

您是否使用过element.onresize

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

或使用jQuery

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

Answer 3

您可以使用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

中

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

3 个答案: