Question

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

经过一个小时的搜索和摆弄，我发现有些东西可以工作，但这还不够好。

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

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

我已经尝试使用根据SO post调整大小的jQuery。由于某些原因，不会触发resize事件。真的，我不想为此而引入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>

HTML textarea调整大小事件

2 个答案: