Как сделать, чтобы высота textarea уменьшалась при удалении текста?

Question

Я сделал код, который расширяет нижнюю границу при добавлении текста:

var textarea = document.querySelector('textarea');

textarea.addEventListener('keyup', function(){
  if(this.scrollTop > 0){
    this.style.height = this.scrollHeight + "px";
  }
});

Но обратное сделать не получается.

Answer 1

"keyup" не отработает, если вы с помощью контекстного меню (правой кнопкой мыши) вставите, скажем, текст в свой texatrea. Думаю, лучше подойдет event "input"

document.addEventListener('DOMContentLoaded', () => {
    const textarea = document.querySelector('#someArea');

    //Каждые 30 символов будем увеличивать\уменьшать высоту с шагом 20px
    const heightStep = 20, heightPerSymbols = 30;

    textarea.addEventListener('input', event => 
        event.currentTarget.style.height = (Math.ceil(event.currentTarget.value.length / heightPerSymbols) * heightStep) + 'px'
    );
})

БЛОГ НА HUSL

Как сделать, чтобы высота textarea уменьшалась при удалении текста?

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