Textarea scrollHeight 不更新阻止自动调整大小

Question

我有点卡在看似简单但行不通的事情上。

我想在模式中创建一个自动调整大小的文本区域。 textarea 的值根据激活模态的元素添加到模态显示中。

在模态外观上，文本区域未调整大小并且控制台将 0 报告为 scrollHeight。

如果我点击文本区域，它会被调整大小。如果我从文本区域输入或删除文本，它会调整大小。

我不明白为什么当以编程方式设置值时它报告 scrollHeight 0。

resize函数如下

$(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";
    }
});

Textarea scrollHeight 不更新阻止自动调整大小

Textarea scrollHeight not updating preventing auto resize

javascript

textarea

autoresize