HTML textarea 调整大小事件答案

【问题标题】：HTML textarea resize eventHTML textarea 调整大小事件
【发布时间】：2019-11-22 04:40:27
【问题描述】：

我正在寻找一种在调整文本区域大小时运行一些 JS 的方法。

经过一个小时的搜索和摆弄，我找到了一些可行的方法，但还不够好。

titleTextArea.mouseup(function() {
    popup.update(); titleTextArea.focus();
});

上面代码的问题是在textarea点击的时候也会运行。我正在运行的代码会导致 textarea 重新渲染，当有人在其中工作时不应该发生这种情况，因为它会混淆焦点。

我已经尝试使用 jQuery 来调整大小，根据 SO post。由于某种原因，调整大小事件不会触发。而且我真的不希望为此引入 jQuery UI。

有没有办法在文本框调整大小时运行代码（仅在调整大小完成后才可以），而这些代码也不会被一堆不同的操作触发？

（PS：为什么没有香草事件？！）

【问题讨论】：

你在那个 SO 帖子上看到这个答案了吗？ stackoverflow.com/a/7055239/1376624也用mouseup，不过可能会更流畅
不幸的是，仅整个窗口或 iframe 始终支持调整大小事件。很难学到这一点。
你看过 ResizeObserver API developer.mozilla.org/en-US/docs/Web/API/ResizeObserver 吗？然后你可以像这里一样实现一个 polyfill 来支持 IE、Edge 和 Safari - codepen.io/florinsimion/pen/GRRLZyJ

标签： javascript jquery html textarea dom-events

【解决方案1】：

一个简单的解决方案可能只是添加对宽度/高度的检查，但不是一个完美的解决方案：

var ta = document.getElementById("text-area");
var width = ta.clientWidth, height = ta.clientHeight
document.getElementById("text-area").addEventListener("mouseup", function(){
  if(ta.clientWidth != width || ta.clientHeight != height){
    //do Something
    console.log('resized');
  }
  width = ta.clientWidth;
  height = ta.clientHeight;
});

&lt;textarea id="text-area" rows="4" cols="50"&gt;&lt;/textarea&gt;

【讨论】：

这很简单。不确定我如何（1）不考虑这个和（2）在其他 SO 线程中错过了这个解决方案。这是我最终得到的代码：pastebin.com/ZCP6deXG.

【解决方案2】：

请试试这个。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css"
        type="text/css" media="all">
</head>
<body>
<textarea></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    $("textarea").resizable({
        resize: function() {
            alert("xxx");
        }
    });
</script>
</body>
</html>

【讨论】：