HTML | JS Отображение количества использованных символов в строке

Question

Есть модальное окно с текстовой строкой для добавления задания. Для длинны задания есть ограничение в 70 символов. Я написал маленький скрипт

$(document).on('keypress', '#TaskNameInput', function () {
    input = $("#TaskNameInput").val().length;
    document.getElementById("taskNameCharacterCounter").innerText = (70-input) + " of 70 characters avaliable";
});

Первое, что я заметил это когда пишешь певрый символ, то длинна переменной input все равно равна 0, однако все равно в конце показывает, что занято все 70 символов. И почему-то данный код также не работает когда стираешь символы.

Как можно было бы это исправить? Как можно было бы это исправить?

Answer 1

const input = document.querySelector('input');
const count = document.querySelector('p b');

input.addEventListener('input', function() {
	count.innerHTML = this.value.length;
});

<input type="text">
<p>Кол-во символов: <b>0</b></p>

БЛОГ НА HUSL

HTML | JS Отображение количества использованных символов в строке

Ответы (1 шт):