Динамическая высота у textarea

102

21 февраля 2021, 13:20

Всю голову сломал, делаю следующее: копирую текстовый контент в модальное окно-форму в textarea. Необходимо авто-изменение высоты textarea без события на самом textarea, т. е. закидываю текст в textarea, и он автоматом меняет высоту в зависимости от контента в нём.

Answer 1

Всё равно ничего лучше не придумаешь:

document.querySelector('textarea').addEventListener('input', function (e) { 
  e.target.style.height = 'auto' 
  e.target.style.height = e.target.scrollHeight + 2 + "px" 
})

textarea { 
  display: block; 
  width: 100%; 
  box-sizing: border-box; 
  resize: none; 
  min-height: 3em; 
}

<textarea></textarea>

Если требуется, чтобы она ещё под начальный текст приняла нужный размер, то можно явно вызвать соответствующую функцию:

function fixTextareaSize(textarea) { 
  textarea.style.height = 'auto' 
  textarea.style.height = textarea.scrollHeight + 2 + "px" 
} 
 
~function () { 
  var textarea = document.querySelector('textarea') 
  textarea.addEventListener('input', function (e) { fixTextareaSize(e.target) }) 
  fixTextareaSize(textarea) 
}()

textarea { 
  display: block; 
  width: 100%; 
  box-sizing: border-box; 
  resize: none; 
  min-height: 3em; 
}

<textarea>Всю голову сломал, делаю следующее, копирую текстовый контент в модальное окно-форму в textarea, необходимо авто-изменение высоты textarea БЕЗ СОБЫТИЯ НА САМОМ textarea, т.е. закидываю текст в textarea и он автоматом меняет высоту в зависимости от контента в нём.</textarea>