HTML 文本区域调整大小事件

Question

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

经过一个小时的搜索和摆弄，我得到了一些有用的东西，但还不够好。

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

上述代码的问题在于，单击文本区域时它也会运行。我正在运行的代码会导致文本区域重新渲染，这在有人在其中工作时不应该发生，因为它会扰乱焦点。

我已经尝试按照此SO post使用 jQuery 可调整大小。由于某种原因，调整大小事件不会触发。事实上，我不想为此引入 jQuery UI。

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

（PS：为什么没有原版活动？！）

Answer 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;
});

<textarea id="text-area" rows="4" cols="50"></textarea>