javascript - HTML 文本区域调整大小事件

Question

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

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

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

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

我已经尝试使用 jQuery 可调整大小，按照此 SO post 。由于某种原因，调整大小事件不会触发。事实上，我不希望为此引入 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>