html - textarea onresize 不起作用

Question

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

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

浏览器尝试：

铬 25.0.1364.172

Safari 6.0.3 (7536.28.10)

火狐19.0

小提琴：http : //jsfiddle.net/btevfik/5abR3/

更新

当我吸取教训不要100％信任w3schools时，我发现了这个

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

Answer 1

大多数浏览器只会在 body 元素上触发 onresize。

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

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

它是纯 JavaScript。

Answer 2

Textareas 不会在大多数（全部）中调整大小，在这种情况下，浏览器的 onresize事件不适用于窗口对象，您可以使用 jQuery UI 插件：

$("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。就我而言，这破坏了整个布局。您可以使用以下方法摆脱额外的边距/填充：

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

这当然不是很干净，也是我的问题，但它在我的情况下有效。如果我遇到任何问题，我会更新这篇文章。

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 年历史了。