HTML textarea 调整大小事件

Question

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

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

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

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

我已经尝试使用 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>

Answer 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>