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:

1
<script src="http://www.naszastrona.pl/sign_limit.js" type="text/javascript"></script>

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
<textarea id="comment" onkeyup="SignLimit(this,255);" cols="\&quot;25&quot;" rows="3" name="comment"></textarea>
<small>Wykorzystano <strong><span id="counter">0/255</span></strong> znaków</small>

W taki oto sposób wprowadziliśmy w naszym polu tekstowym zliczanie i ograniczenie liczby wprowadzanych znaków.

komentarze 2

  1. Bartek napisał(a):

    dzięki wielkie

  2. […] 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 […]

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]