Piterski
@Piterski

Почему такое «странное» поведение textarea при autoresize?

let t = document.querySelector('textarea');
t.addEventListener('input', resize);

function resize(event) {
  const el = event.target;
  const height = event.target.scrollHeight;
  el.style.height = "auto";
  el.style.height = `${height}px`;
}

Пример поведения - https://codepen.io/bulankin/pen/NWaPoZy

При этом, если написать все тоже самое, но напрямую без переменной, то все работает нормально.

let t = document.querySelector('textarea');
t.addEventListener('input', resize);

function resize(event) {
  const el = event.target;
  el.style.height = "auto";
  el.style.height = `${event.target.scrollHeight}px`;
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
zb_venom
@zb_venom
Жизнерадостный чебурек
Когда вы получаете значение переменной scrollHeight оно равно одному значению, а после установки el.style.height = "auto" значение scrollHeight изменяется. Если изменить последовательность получения переменной, все будет работать аналогично второму варианту:
function resize(event) {
  const el = event.target;
  el.style.height = "auto";
  const height = event.target.scrollHeight;
  el.style.height = `${height}px`;
  console.log(height)
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 янв. 2022, в 23:28
26400 руб./за проект
27 янв. 2022, в 23:17
105400 руб./за проект
27 янв. 2022, в 23:17
500 руб./за проект