Często zdarza się, że chcemy ograniczyć liczbę znaków jaką można wpisać w komentarzu na naszej stronie. Można to zrobić poprzez walidację po stronie serwera. Jest to jednak niewygodne dla użytkownika, który zamiast zapisanego komentarza otrzymuje komunikat o przekroczonej liczbie znaków. Dochodzi do paradoksu, że użytkownik powinien liczyć użyte znaki, aby zmieścić się w określonym limicie. Innym rozwiązaniem jest ucięcie komentarza i zapisanie tylko pierwszych x znaków, np. 255 znaków. To jednak sprawi, że na naszej stronie znajdzie się dużo poobcinanych komentarzy. Nie będzie to wyglądać zbyt estetycznie.
Idealnym rozwiązaniem jest zliczanie liczby znaków po stronie klienta/użytkownika i zablokowanie możliwości wpisania większej liczby znaków niż zakłada przyjęty przez nas limit. Rozwiązanie to jest dobre, ponieważ użytkownik widzi ile znaków wykorzystał i w każdym momencie może przeredagować swoją wypowiedź. W celu osiągnięcia takiego rozwiązania posłużymy się JavaScriptem.
W osobnym pliku, np. o nazwie sign_limit.js umieszczamy następujący kod:
1 2 3 4 5 6 7 8 9 10 | function SignLimit(tab,max) { var oSpan = document.getElementById( 'counter' ); oSpan.innerHTML = ( ( tab.value.length ) ) +'/' + max; if ( tab.value.length = max ) { input = tab.value.substring(0,max - 1); tab.value = input; } } |
Pierwsza część funkcji:
1 2 | var oSpan = document.getElementById( 'counter' ); oSpan.innerHTML = ( ( tab.value.length ) ) +'/' + max; |
odpowiada za podmianę aktualnej informacji o liczbie wpisanych znaków, który dynamicznie zmienia się na naszej stronie. Kolejna część:
1 2 3 4 5 | if ( tab.value.length = max ) { input = tab.value.substring(0,max - 1); tab.value = input; } |
powoduje, że jeśli przekroczymy liczbę dozwolonych znaków, to wtedy nasze pole tekstowe zostaje zaktualizowane stringiem obciętym do x znaków, np. 255 znaków.
Teraz musimy dodać skrypt do naszej strony, przed znacznikiem </head> wstawiamy:
Nie pozostaje nic innego jak odpowiednio zmodyfikować nasze pole textarea, aby wykorzystywało powyższy skrypt. Przykładowe pole textarea może wyglądać tak:
1 2 |
W taki oto sposób wprowadziliśmy w naszym polu tekstowym zliczanie i ograniczenie liczby wprowadzanych znaków.
Popularity: 33%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
dzięki wielkie
[...] czas temu pokazałem jak przy użyciu JavaScriptu zrobić prosty licznik znaków wpisanych do pola typu textarea oraz jak ograniczyć ilość znaków tam wpisywanych. Dzisiaj [...]