textarea onresize 不起作用答案

【问题标题】：textarea onresize not workingtextarea onresize 不起作用
【发布时间】：2013-03-19 09:42:22
【问题描述】：

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

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

浏览器尝试：

Chrome 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

【问题讨论】：

不要相信 w3 学校：w3fools.com
有什么我可以信任的吗？
@btevfik developer.mozilla.org/en-US/docs/Web/HTML

标签： html textarea onresize

【解决方案1】：

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

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

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

它是纯 JavaScript。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

嘿，谢谢。有没有一种方法可以轻松地将其添加到页面中的所有 textarea 元素中。我尝试了var arr = document.getElementsByTagName ('textarea');，然后迭代arr，但没有奏效。
var text = document.getElementsByTagName ('textarea'); for(var i=0; i<text.length; i++){ text[i].resizable({ resize: function() { alert("AAA"); } }); }
yse,$("body").find("textarea").reresizable(.... 实际我没有测试过，但我必须努力

【解决方案3】：

一个小解决方法：

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

【讨论】：

【解决方案4】：

只是对 ravula 答案的更新（我的声誉对于 cmets 来说太低了）：

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

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

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

【讨论】：

【解决方案5】：

无论出于何种原因，我都喜欢坚持使用 vanilla 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 年历史了。

【讨论】：