Как при вводе текста, textarea прокручивать до конца?

Question

[Анатолий]

Имеется textarea, которая расширяется (изменяется row) с помощью js, при вводе текста.

Но при появлении прокрутки, textarea не "докручивается" до конца.

Вот css стиль

textarea#textArea {
	font-family: Arial;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: -.35px;
	text-align: left;
	overflow-wrap: break-word;
	word-break: break-word;
	padding: 0 0 10px 0;
  outline: none;
	width: 100%;
	min-height: 12px;
	max-height: 104px;
  border: none;
  resize: none;
  overflow: auto; }

Вот весь пример:
https://codepen.io/workcode/pen/vYOamme

Как увидеть проблему:
В примере жмете на синий круг, затем вводите 6 строк, нажимая Enter. Можно в строке по 1 символу вводить.

PS. Почему-то не могу сюда загрузить анимированную gif-ку. ((

Upd. Дописал в пример строку:
document.getElementById('textArea').scrollTop = document.getElementById('textArea').scrollHeight;

Теперь при увеличении числа строк, осталось все как и было.
Но если написать еще 1 символ, то все нормализуется.
Надо еще немного допилить ))

Answer 1

[Максим Морев]

Да просто у вас очень странные пляски с навешиванием событий.

Уберите ваше

document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);

И поставьте вместо него:

document.getElementById('textArea').addEventListener("input", updateSize);

И будет работать как вам надо.

Потом попробуйте вбивать текст, не отбивая его пробелом (просто зажмите символ и удивитесь, что всё сломалось).
Осознайте, что единственный адекватный способ посчитать новую, необходимую высоту textarea - это скопировать её куда-то "out of bounds" вместе с контентом и узнать scrollHeight.

Держите пример:

Comments

[Анатолий]

Еще подскажите, пожалуйста, почему такой эффект, когда в css стиле дописываю к #textArea родительский элемент #main, то получаю странный эффект.

PS. Понятно, что это лишнее, так как это id, но просто интересно.
https://codepen.io/workcode/pen/yLNZzZp

[Максим Морев]

Анатолий, потому что внешний вид textarea в таком случае получается контекст-зависимый от родителя (шрифты, размеры, отступы), а клонируемый элемент присоединяется к body, таким образом стиль #main #textarea - на него не срабатывает, и размеры вычисляются так, как будто стилей нет.
В принципе, можно заменить document.body на target.parentNode - будет работать. Вероятно, так даже лучше в целом. Хотя при нормальной структуре (тот же БЭМ) с такими проблемами вы никогда не столкнётесь.