Zliczanie znaków w polu formularza
za pomocą prostego plug-inu dla frameworka jQuery

W projekcie, który właśnie realizuję, stanąłem przed koniecznością wykonania prostego liczników znaków dla kilku pól formularza znajdujących się w obszarze zaplecza administracyjnego. Pola takie są nam potrzebne do celów związanych z optymalizacją witryny dla wyszukiwarek. Na przykład pole tytułu (widocznego w pasku tytułu przeglądarki) powinno mieć nie więcej niż 65 znaków (licząc też spacje.

Kod jest mi puki co potrzebny tylko w jednym miejscu, ale nie lubię oddawać prowizorek. Nie lubię też szukać użytecznych kawałków kodu w szablonach i plikach innych, zrealizowanych projektów. Postanowiłem więc napisać prosty plug-in realizujący tą funkcjonalność. W ten sposób powstał charCounter – prosty licznik oparty o framework jQuery.

Użycie mojego kodu jest niezwykle proste. Weźmy na przykład prostą stronę zawierającą tylko pole tekstowe:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<input type="text" name="textField" id="textField" />
</body>
</html>

Aby dodać do tego pola licznik znaków, wystarczy dodać niewielki kawałek kodu JavaScript. Po modyfikacji dokument będzie wyglądał następująco:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://wilga.net.pl/PROJECTS/charCounter/1.0/charCounter_1.0-min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var chCount = new charCounter('textField');
		})
	</script>
</head>
<body>
	<input type="text" name="textField" id="textField" />
</body>
</html>

Jak widać zmiany ograniczyły się do dodania kilku linijek w części nagłówkowej dokumentu. Pierwsza z wyróżnionych linijek po prostu dodaje bibliotekę jQuery. Posłużyliśmy się tu serwerami firmy Google – to naprawdę dobry pomysł, bo nie zjadamy własnego transferu, strona ładuje się szybciej a przeglądarka nie sciąga kilkakrotnie tej samej biblioteki, jeśli jakiś inny projekt już jej użył.

Druga linijka dodaje do naszej strony bibliotekę napisaną przeze mnie.

Skrypt wewnątrz znaczników <script></script> dla znających jQuery lub Prototype powinien wyglądać znajomo. Mamy tu kawałek kodu, który wykonywany jest dopiero, gdy cały dokument jest załadowany.

Linijka „var chCount = new charCounter(‘textField’);" dodaje licznik do naszego pola tekstowego.

Odliczanie w dół

Pisałem na początku, że zliczanie znaków potrzebne mi jest do SEO. Tytuł strony nie powinien mieć więcej niż 65 znaków, opis w znaczniku meta też ma swoją zalecaną długość. Osoba obsługująca panel administracyjny nie musi pamiętać ile znaków ma liczyć sobie każde z tych pól. Tak więc mój licznik potrafi odliczać od na przykład wspomnianych 65 do zera a nawet do liczb ujemnych, jeżeli użytkownik świadomie i z własnej woli będzie chciał przekroczyć tę liczbę.

Nie potrzeba nam nawet zbyt wielu zmian. Wystarczy, że do konstruktora obiektu licznika dodamy drugi parametr określający maksymalną długość. Jedyna zmieniona linijka będzie więc wyglądała następująco:

var chCounter = new charCounter('textField', 65);

Gotowe! Teraz nasz licznik liczy od 65 w dół.

Licznik w miejscu wybranym przez nas

Nie zawsze miejsce tuż za polem tekstowym to najlepsze miejsce na licznik. Na przykład jeżeli chcemy dodać informację że „pozostało znaków…”. Na szczęście o tym także pomyślałem. Wprowadźmy sobie niezbędne modyfikacje:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://wilga.net.pl/PROJECTS/charCounter/1.0/charCounter_1.0-min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var chCount = new charCounter('textField', 65, 'counter');
		})
	</script>
</head>
<body>
	<input type="text" name="textField" id="textField" />
	<span>Pozostało ci jeszcze <span id="counter"></span> znaków</span>
</body>
</html>

Jedyna zmiana w kodzie JavaScript polega na dodanie do konstruktora obiektu trzeciego parametru zawierającego identifykator elementu, w którym znajdzie się licznik.

W moim przykładzie licznik w zdefiniowanym przez użytkownika miejscu „odlicza”, czyli liczy od 65 w dół. Nic nie stoi na przeszkodzie, aby liczył on od 0 „w górę”. Drugi parametr wystarczy wówczas zamienić na null. Proste, prawda?

Pliki

Bibliotekę można ściągnąć w dwóch wersjcach:

plik skompresowany
Ta wersja jest odpowiednia, jeżeli potrzebujesz nam tylko funkcjonalność stworzonego przeze mnie licznika i nie zamierzasz wprowadzać w nim żadnych zmian. Kod jest "zminiaturyzowany" za pomocą kompresora JavaScript. Oznacza to w praktyce, że źle sie go czyta i modyfikuje.
wersja dla programistów
Ta wersja zawiera dokładnie takie same funkcje jak powyższa. Nie została jednak odchudzona, przez co kod otwarty w dowolnym edytorze jest znacznie bardziej czytelny dla człowieka. W kodzie znajdują się komentarze. Linijki są też rozsądnie podzielone, więc czyta i modyfikuje się dość łatwo. Ten plik ma jednak także wady - jest ponad trzykrotnie większy niż wersja zminiaturyzowana. Jest więc gorszy do stosowania w środowisku produkcyjnym.