Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

Licznik znaków w polu tekstowym + progressbar


Licznik znakówDzisiejszy wpis będzie poświęcony skryptowy, który z pewnością sprawi, że nasza strona stanie się przyjaźniejsza dla użytkowników. Skrypt został napisany w jQuery i w zależności od ilości wpisanych znaków wywołuje odpowiednie akcje, tj. zmieniający się progressbar oraz kolor obramowania. Kod został umieszczony w trzech plikach: index.html, style.css oraz script.js.

Kod na Githubie

Plik index.html:

Plik script.js:

Plik style.css zawiera jedynie szkielet strony, wygląd formularza oraz progressbar’a.

Jak działa skrypt?

Formularz zawiera pole tekstowe(w tym przypadku textarea) z identyfikatorem id=”textarea” oraz maxlength. Poniżej został umieszczony paragraf o klasie .count, gdzie umieszczona jest wartość maxlength. Plik script.js składa się z kilku fragmentów.
Na początku ustawiona zostaje domyślna wartość licznika, czyli wartość atrybutu maxlength.

Następnie definiuje się kilka zmiennych, które zależą od wartości maxlength.

Zawierają między innymi zmienne, które liczą aktualną ilość wpisanych znaków, maksymalną ilość słów, czy też ilość słów, które można jeszcze wpisać.

Kolejnym etapem jest wykonanie instrukcji warunkowej, która polega na sprawdzeniu czy ilość wpisanych słów jest mniejsza lub różna od wartości maxlength. W zależności od box.length zmienia się ilość możliwych wpisanych słów, a także zmienia się długość progressbara.

Ostatnim etapem jest zmiana koloru obramowania. Jeśli wyczerpano ilość słów, obramowaniu staje się czerwone, jeśli natomiast można wciąż je wpisywać obramowanie pozostaje zielone.

  • A teraz przytrzymaj sobie klawisz i patrz jak licznik nie działa 😉
    Dlatego od tego typu rzeczy jest zdarzenie input, a nie keyup.

    • Jak zwykle czegoś nie przewidziałem. Poprawię jak najszybciej 🙂

      • To tak zawsze jest:) 30% czasu idzie na napisanie kodu, a 70% na testowanie i poprawienie błędów