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

Question

[Vladislav]

Всех приветствую, есть textarea и у него по макету максимальная длина в 360 символов, как динамически выводить в поле сколько символов вбито с помощью нативного JavaScript? Скрин для наглядности

Comments

[Антон]

Есть событие input
Метод val и length, пожалуй это все, что вам понадобится

Answer 1

[Вадим]

Использовать событие 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
}

Comments

[Vladislav]

Вадим а можете пример пожалуйста прописать? и само 0/360 это в какой то атрибут запихнуть или тэг и потом позиционировать поверх текстареа?

[Вадим]

Vladislav, обновил

[Вадим]

Vladislav, но это грубый набросок. В идеале максимальное значение в счётчик нужно пропихивать из атрибута max у textarea. И при каждом изменении textarea обращаться к соседнему counter, а не как я сделал в демке - сохранив первый попавшийся в переменную.

[Vladislav]

Вадим, понял, спасибо большое

Answer 2

[Алексей Ярков]

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;
}

Answer 3

[Александр]

Для себя дополнил решение Алексей Ярков тем, что maxlength (maxCounter) забирает из html чтоб не лезть в JS для правки при изменении, например может динамически меняться для разных ситуаций или пользователей.

const letter_text_textarea = document.getElementById('letter_text');
const currentCounter = document.getElementById('currentCounter');
const maxCounter = document.getElementById('maxCounter').textContent;

letter_text_textarea.addEventListener('input', onInput)

function onInput(event) {
    event.target.value = event.target.value.substr(0, maxCounter);
    const length = event.target.value.length;
    currentCounter.textContent = length;
}

Answer 4

[Михаил]

<textarea  maxlength="10" resize="none" name="tweet" id="textbox" class="form-control" rows="10" cols="60"></textarea>
        <span id="char_count"></span>



    <script>
       
        var count_chars = document.getElementById("textbox").maxLength;
        
        let textArea = document.getElementById("textbox");
        let characterCounter = document.getElementById("char_count");
        characterCounter.textContent ="Осталось: " + count_chars + " из " + count_chars;
        const maxNumOfChars = count_chars;
        
        const countCharacters = () => {
            let numOfEnteredChars = textArea.value.length;
            let counter = maxNumOfChars - numOfEnteredChars;
             characterCounter.textContent ="Осталось: " + counter + " из" + count_chars;
        };


        textArea.addEventListener("input", countCharacters);




    </script>