SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик

Как в textarea вывести динамически количество набираемых символов?

Всех приветствую, есть textarea и у него по макету максимальная длина в 360 символов, как динамически выводить в поле сколько символов вбито с помощью нативного JavaScript? Скрин для наглядности5fb2235b354c6777554199.jpeg
  • Вопрос задан
  • 111 просмотров
Решения вопроса 1
@MrDecoy
Верставший фронтендер
Использовать событие input на textarea и в обработчике брать event.target.value.length - количество вбитых символов. И пропихивать в этот счётчик.

const ta = document.querySelector(...) // textarea
const counter = document.querySelector(...) // счётчик

ta.addEventListener('input', onInput)

funcion onInput(evt) {
const length = evt.target.value.length
counter.textContent = length
}


Ответ написан
Пригласить эксперта
Ответы на вопрос 1
yarkov
@yarkov Куратор тега JavaScript
Проект "Жизнь после смерти" - lifeafterdeath.ru
https://jsfiddle.net/yarkov_aleksei/a4x6p1s3/

<div class="container">
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <div class="counter">
    <span class="current">0</span>&nbsp;/
    <span class="total">360</span>
  </div>
</div>


.container {
  position: relative;
  width: max-content;
}

.counter {
  position: absolute;
  bottom: 5px;
  right: 5px;
}


const textarea = document.querySelector('textarea');
const counter = document.querySelector('.current');
const maxlength = 360;

textarea.addEventListener('input', onInput)

function onInput(event) {
	event.target.value = event.target.value.substr(0, maxlength); // обрезаем текст до 360 символов
	const length = event.target.value.length;
	counter.textContent = length;
}
Ответ написан
Ваш ответ на вопрос

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

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