ajax 成功函数后更改文本区域的高度

Question

我的代码中有一个文本区域，用于显示从后端响应的消息。当内容的长度太长以至于出现滚动条时，我想自动增加高度。这是我的代码：

$.ajax({
    type: 'POST',
    async: false,
    url: '/text_translation',
    data: JSON.stringify(data),
    success: function(returnStr) {
        $.each(returnStr,function(item, value) {
            returnString.html(returnString.html() + value + '\n');//show message
        });

        console.log(returnString.clientHeight);//undefined

        //if message too long, increase the height 
        if (returnString.clientHeight < returnString.scrollHeight) {
            returnString.css('height', 'auto').css('height', returnString.scrollHeight + (returnString.offsetHeight - returnString.clientHeight));    
        }

}

一开始因为ajax是异步的，所以我把"async"设置成"false"保证每个函数之后可以执行变化，但是还是不行.我尝试打印 clientHeight，无论 async 是 false 还是 true，它都显示 "undefined"。设置 false 是否意味着我正在调用的语句必须在我的函数中的下一个语句被调用之前完成？我一直对结果感到困惑，这是我认为的特定数字。

然后我尝试像这样使用 "input" 事件函数：

returnString.on('input',function() {
    if (this.clientHeight < thhis.scrollHeight) {
        $(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
    }
});

没有改变。

我一定是哪里做错了，但我不知道错在哪里。请告诉我原因，先谢谢你的回答

Answer 1

查看 here 异步如何与 $.ajax 一起工作，因为您使用的是成功回调，我认为它不会影响您的代码在这种情况下的工作方式。

要调整文本区域的大小，我发现这个 answer 很有用，并创建了一个函数，您可以在其中传入下面的 textarea 元素。

$("button").click(() => {

  let returnStr = "Test\n\nTest\n\nTest\n\nTest\n\nTest\n\nTest";

  $("textarea").val(returnStr);
  resizeTextareaHeight($("textarea")[0]);
});

function resizeTextareaHeight(textarea) {
  while ($(textarea).outerHeight() < textarea.scrollHeight + parseFloat($(textarea).css("borderTopWidth")) + parseFloat($(textarea).css("borderBottomWidth"))) {
    $(textarea).height($(textarea).height() + 1);
  };
}

textarea {
  overflow-y: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <button type="button">Pretend Ajax Call</button>
</div>
<div>


  <textarea></textarea>
</div>

ajax 成功函数后更改文本区域的高度

Change height of a textarea after ajax success function

javascript

css

ajax

jquery

auto-increment