Zliczanie liczby elementów w textarea

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>

W powyższym kodzie wykorzystałem instrukcję with. Kiedy pisałem ten kod, nie wiedziałem, że jest tak nieciekawym rozwiązaniem.

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.

Zobacz podobne artykuły