Skrypt 2: Licznik znaków w polu tekstowym (na żywo)

Teoria

Pokazuje użytkownikowi na bieżąco, ile znaków wpisał i ile mu jeszcze zostało — przydatne przy polach z limitem długości (np. opis produktu, komentarz, tweet).

Kod (JavaScript)

<textarea id="opis" maxlength="200"></textarea>
<p id="licznik"> / 200</p>

<script>
    const pole = document.getElementById("opis");
    const licznik = document.getElementById("licznik");

    pole.addEventListener("input", function () {
        licznik.textContent = pole.value.length + " / 200";
    });
</script>

Komentarz i wyjaśnienie kodu

Zdarzenie input (nie change!) uruchamia się PRZY KAŻDYM naciśnięciu klawisza, dając natychmiastową aktualizację licznika — change zadziałałoby dopiero po opuszczeniu pola. pole.value.length zwraca aktualną liczbę znaków wpisanych w polu.

Typowe błędy

Częsty błąd to użycie zdarzenia change zamiast input — licznik aktualizowałby się dopiero po kliknięciu poza polem, co nie daje efektu "na żywo".