Как отследить изменение высоты textarea?

Question

Подскажите возможно ли отследить изменение высоты textarea при изменении размера мышкой? Возможно конечно сделать вычисление при наведении мыши или что то подобное. Но, есть проще вариант? Какой ни будь getter или setter, наблюдатель свойств?

Нагуглил ответ.

    var $target = $('#descriptionLabel');

    // Инициализация MutationObserver
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'style') {
                console.log('Обнаружено изменение стиля:', $target.attr('style'));
                // Реагирование на смену стиля
            }
        });
    });

    // Конфигурация обозревателя: отслеживаем только изменения атрибута 'style'
    var config = { attributes: true, attributeFilter: ['style'] };

    // Запуск наблюдения
    observer.observe($target[0], config);

С изменяемой высотой решил так:

// Наблюдатель textarea с id descriptionLabel.
var observer = new MutationObserver(styleChangedCallback);
observer.observe(document.getElementById('descriptionLabel'), {
    attributes: true,
    attributeFilter: ['style'],
});

// При изменении высоты textarea, меняется высота контейнера conteinerMainEditTask.

function styleChangedCallback(mutations) {
    const newHeight = parseInt(mutations[0].target.style.height, 10);
    const calculateHeight = globalHeightEditTask + newHeight;
    if (calculateHeight >= globalHeightEditTask) {
        console.log('globalHeightEditTask --> ' + calculateHeight);
        $('.conteinerMainEditTask').css('height', calculateHeight);
    }
}

Answer 1

Можно с помощью ResizeObserver

const txt = document.querySelector('#txt');

new ResizeObserver(() => {
    console.log({
        x: txt.offsetWidth,
        y: txt.offsetHeight
    });
}).observe(txt)

<textarea name="" id="txt"></textarea>

БЛОГ НА HUSL

Как отследить изменение высоты textarea?

Ответы (1 шт):