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

【问题标题】：Is it possible to catch resize event when user resizes text input defined resizable by CSS3?当用户调整由 CSS3 定义的可调整大小的文本输入大小时，是否可以捕获调整大小事件？
【发布时间】：2011-12-20 08:32:50
【问题描述】：

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

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

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

感谢您的帮助...

【问题讨论】：

标签： javascript jquery css resizable

【解决方案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 中是这样

【讨论】：

【解决方案2】：

你用过element.onresize

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

或使用 jQuery

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

【讨论】：

【解决方案3】：

如果没有 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);

【讨论】：