Textarea scrollHeight无法更新，防止自动调整大小

Question

我有点看似简单但无法使用。

我想在模式中创建自动调整大小的textarea。textarea的值会根据激活该模式的元素添加到模式显示中。

在模态外观上，不会调整文本区域的大小，并且控制台将滚动高度报告为0。

如果我单击文本区域，则会调整其大小。如果我从文本区域输入文本或从中删除文本，则将调整其大小。

我不知道为什么以编程方式设置该值时为什么会报告scrollHeight 0。

调整大小功能如下。

$(document).on("input change focus", "textarea.notesarea", function (e) {
    this.style.height = 'auto';
    console.log(this.scrollHeight+ "-"+ $(this)[0].scrollHeight); 
    if (this.scrollHeight == 0) {
        this.style.height = "calc(2.25rem + 2px)";
    } else {
        this.style.height = 0;
        this.style.height = (this.scrollHeight + 4) + "px";
    }
});

Answer 1

一种快速而肮脏的解决方案是强制代码等待，直到首先打开模式，然后再添加“ calc（2.25rem + 2px）”；达到其高度。您可以使用setTimeout（function（）{...例如：

$(document).on("input change focus", "textarea.notesarea", function (e) {
    this.style.height = 'auto';
    console.log(this.scrollHeight+ "-"+ $(this)[0].scrollHeight); 
    if (this.scrollHeight == 0) {
        that = this;
        setTimeout(function(){
          that.style.height = "calc(2.25rem + 2px)";
        },300);
    } else {
        this.style.height = 0;
        this.style.height = (this.scrollHeight + 4) + "px";
    }
});