Question

根据w3学校<textarea>支持onresize，但它不起作用。

http://www.w3schools.com/jsref/event_onresize.asp

浏览器试过了：

Chrome 25.0.1364.172

Safari 6.0.3（7536.28.10）

Firefox 19.0

FIDDLE：http://jsfiddle.net/btevfik/5abR3/

更新

因为我从100％学到了不信任w3schools的教训，我找到了这个

https://developer.mozilla.org/en-US/docs/DOM/element.onresize

Answer 1

大多数浏览器只触发body元素的onresize。

到目前为止，我发现的最佳解决方案是在漂亮的黑客中使用溢出和下溢事件监听器。

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/

这是纯粹的JavaScript。

Answer 2

Textareas不会在MOST（全部）浏览器中调整 onresize 事件 NOT WORKING FOR 在这种情况下窗口对象，您使用jQuery UI插件：< / p>

$("idoftextarea").resizable({
    resize: function() {
        $("id").append("yourcode");
    }
});

参考：http://jqueryui.com/resizable/

Answer 3

一点解决方法：

$('textarea').bind('mouseup', function() {
    console.log('resized');
});

Answer 4

只是对ravula答案的更新（我的声誉太低而无法发表评论）：

JQuery在可调整大小的元素中添加了一堆div。在我的情况下，这破坏了整个布局。您可以使用以下方法删除额外的边距/填充：

＆＃13;

.ui-wrapper {
	padding:0px !important;
	margin:0px !important;
	
}

＆＃13;

＆＃13; 这肯定不是很干净，我的问题，但它在我的情况下工作。如果我遇到任何问题，我会更新这篇文章。

Answer 5

无论出于何种原因，我都喜欢坚持使用普通js。所以这是香草的简单解决方案：

<textarea
  onmousedown="storeDimensions(this)"
  onmouseup="onresizeMaybe(this)"
></textarea>

<script>
  function storeDimensions(element){
    element.textWidth = element.offsetWidth;
    element.textHeight = element.offsetHeight;
    element.value = "is it gonna change? we don't know yet...";
  }
  
  function onresizeMaybe(element){
    if (element.textWidth===element.offsetWidth
     && element.textHeight===element.offsetHeight) 
      element.value = "no change.\n";
    else element.value ="RESIZED!\n";
    
    element.value +=
       `width: ${element.textWidth}\n`
      +`height: ${element.textHeight}`;
  }
</script>

对于作业，请使用onmousemove而不是onmouseup来触发调整大小事件（在我的特殊情况下不需要）。

:)希望有一天能对某人有所帮助...看看这个问题现在已经5岁了。

textarea onresize不工作

5 个答案: