HTML 文本区域调整大小事件

Question

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

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

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

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

我已经尝试使用 jQuery 可根据此 SO post 调整大小。由于某种原因，调整大小事件不会触发。实际上，我宁愿不需要为此引入 jQuery UI。

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

(PS：为什么没有原版事件？！）

Answer 1

请试试这个。

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

Answer 2

一个简单的解决方案可以是添加对 width/height 的检查，但不是完美的解决方案：

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>

HTML 文本区域调整大小事件

HTML textarea resize event

html

javascript

jquery

textarea

dom-events