Zliczanie znaków w textarea

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2008-02-24

szukaj: zliczanie znaków textarea js javascript

Często występuje potrzeba zliczania liczby znaków wpisanych w pole formularza. Przeważnie jest to spowodowane określoną liczbą znaków mogącą się zmieścić w komórce tabeli bazy danych. Wszystko wydawałoby się proste - krótki skrypt JS i jest ok... No niestety! tak łatwo to to nie będzie:-). Dlaczego? Tym razem Nawala FF... Jak? Zamiast zliczać enter jako 2 znaki '\r\n\' liczy jako jeden - '\n'. (ukośniki się nie liczą). Ale można to łatwo obejść. Starczy tylko dodać kilka linijek kodu do skryptu:

<html> 
<head> 
<title>Zliczanie znaków</title> 
<script type="text/javascript"> 
function zliczaj(nr_f, nr_l, nr_t) { 
    with(document.forms[0]) { 

        var tekst = elements[nr_t].value; // cały text z pola textarea 
        var dl_tresc = elements[nr_t].value.length; // długoś tekstu z textarea 
        var maxlen = 30; // maxymalna dozwolona długość 
        var prawdziwa = 0; // licznik znaków 
        var entery = 0; 
        
        for (i=0; i<dl_tresc; i++) { 
            if (tekst.charAt(i) == "\n") { 

                prawdziwa++; 
                entery++;
 
                if (navigator.appName != "Netscape") 
                    i++; 
            } 
            prawdziwa++; 
        } // koniec for i 
        
        elements[nr_l].value= maxlen - prawdziwa; // wyświetl komunikat o licznie znaków 
        if (prawdziwa>maxlen) { 
            if (navigator.appName != "Netscape") 
                elements[nr_t].value = elements[nr_t].value.substring(0,maxlen);
            else 
                elements[nr_t].value = elements[nr_t].value.substring(0,maxlen-entery);
    
        elements[nr_l].value = 30 - maxlen; 
        alert("Maksymalna długość to " + maxlen +"!"); 
        } 
    } // koniec with 
} 
</script> 
</head> 
<body> 
 <form action="#">
  <input type="text" size="3" name="licznik" /> - pozostało znaków 
  <textarea name="tresc" onkeyup="zliczaj(0,0,1)" cols="20" rows="5">Tu wpisz tresc</textarea> 
 </form> 
</body> 
</html>

No i wszystko działa! Można oczywiście ten skrypt wrzucić do osobnego pliku, i wykorzystać na kilku stronach. Właśnie dlatego nie zrobilem tu na sztywno kodu, używając nazw pól formularza, tylko odwoływałem się do indexu elements[nr] i forms[nr]. Dzięki temu, zmieniając parametry przekazywane do funkcji przy zdarzeniu 'onkeyup' (na puszczenie klawisza), można dostosować to do każdego formularza. Do funkcji przekazuje kolejno - index formularza [u mnie 0], index licznika [u mnie 0 - pierwsze pole formularza] oraz index pola tekstowego - 1.

Patryk 'yarpo' Jar

szukaj: zliczanie znaków textarea js javascript

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!