Wpisany przez Patryk yarpo Jar
|
poniedziałek, 21 września 2009 20:22 |
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.
|