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

Имеется 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 символ, то все нормализуется.
Надо еще немного допилить ))
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
SeaInside
@SeaInside
10 лет пилю все эти штуки
Да просто у вас очень странные пляски с навешиванием событий.

Уберите ваше
document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);


И поставьте вместо него:
document.getElementById('textArea').addEventListener("input", updateSize);


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

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

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы