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

Question

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

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

Is it possible to catch Javascript (preferred in jQuery) event when the user resizes input ?我尝试过使用标准 jQuery .resize() 但它没有像我想象的那样工作。

感谢您的帮助...

Answer 1

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

您是否使用过 element.onresize

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

或使用 jQuery

http://api.jquery.com/调整大小/

Answer 3

如果没有 jQuery，它看起来像这样：

编辑1：

使用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);