Textarea scrollHeight не обновляется, предотвращая автоматическое изменение размера

Question

Я застрял на чем-то, что кажется простым, но не работает.

Я хочу создать текстовое поле с автоматическим изменением размера в модальном режиме. Значение текстовой области добавляется в модальное шоу в зависимости от того, какой элемент активировал модальное поле.

При модальном появлении текстовая область не изменяется, и консоль сообщает 0 как scrollHeight.

Если я нажимаю на текстовая область, она изменена. Если я ввожу или удаляю текст из текстовой области, его размер изменяется.

Я не могу понять, почему он сообщает 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

Быстрое и грязное решение состояло бы в том, чтобы заставить код ждать, пока модал впервые не откроется, прежде чем добавить «cal c (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";
    }
});