Oczywiste jest również to, że dla pól tekstowych wystarczy kod :

Ale dla pola textarea już takiej możliwości nie mamy. Kod rozwiązania jest bardzo prosty :

i następnie wykorzystanie funkcji w jakimś polu formularza :

Chciałbym zaznaczyć (dla tych, którzy znają dobrze JS), że zdaję sobie sprawę z tego, że należy korzystać z addEventListener, a nie z onkeyup w elemencie textarea, że nie ma w kodzie znaczników form itp. – nie wynika to jednak tutaj z mojej niewiedzy, ale z założenia że chciałem pokazać jak najprościej jak omawiany „mechanizm” stworzyć.

Zastanówmy się więc jak powinno to być zrobione solidnie. Jeśli chcemy pisać nasze skrypty zgodnie z DOM powinniśmy zapomnieć o dopisywaniu zdarzeń do elementów w znany już sposób czyli przykładowo :

Należy korzystać z metod addEventListener (lub do usunięcia zdarzenia removeEventListener). Ale popatrzmy na kod, wtedy lepiej będzie mnie omawiać, a Tobie zrozumieć.
Więc mamy sobie stronę i gdzieś w kodzie :

Podaj imię :

Napisz 20 słów o sobie : 
Pozostało :

Do strony dołączony mamy plik z rozszerzeniem *.js o kodzie :

function ograniczZnaki()
{
var max = 20;
if (window.event && window.event.srcElement)
{
var obiekt = window.event.srcElement;
}
else
{
var obiekt = this;
}
if ( obiekt.value.length > max )
{
wpisz = obiekt.value.substring(0,max);
obiekt.value = wpisz;
}
var pozostalo = max-obiekt.value.length;
window.document.formularz_kontaktowy.licznik.value = "Pozostało : "+pozostalo+" znaków";
}
function Zaladowano()
{
var element = window.document.formularz_kontaktowy.osobie;
przypiszZdarzenie(element,"keyup",ograniczZnaki);

}
function przypiszZdarzenie(element,typ_zdarzenia,wykonaj_funkcje)
{
if (element.addEventListener)
{
element.addEventListener(typ_zdarzenia,wykonaj_funkcje,false);
}
else
{
element.attachEvent("on"+typ_zdarzenia,wykonaj_funkcje);
}
}
przypiszZdarzenie(window,"load",Zaladowano);

Pole text ma ustawiony atrybut maxlength więc zajmijmy sie polem textarea.Porzucamy więc również przypisanie do BODY zdarzenia onload – robimy to w kodzie JS przez window.onload . Ale od początku – zajmijmy się funkcję przypiszZdarzenie – służy ona nam do przypisania do danego elementu określonego działania (funkcji) w przypadku danego zdarzenia. Zapytacie po co ona, skoro mówiłem, że robi się to przez addEventListener – odpowiedź jest prosta w szanownej przeglądarce Internet Explorer funkcja ta nie zadziała, należy więc użyć funkcji attachEvent. Jej składnia jak widać jest podobno do addEventListnere, zwróćcie jednak uwagę na przedrostek „on” podczas określania typu zdarzenia. Dzięki napisaniu tej funkcji (przypiszZdarzenie) nie musimy za każdym razem sprawdzać czy przeglądarka obsługuje addEventListener czy też nie więc zamiast powtarzać za każdym razem blok :

if (element.addEventListener)
{
element.addEventListener(typ_zdarzenia,wykonaj_funkcje,false);
}
else
{
element.attachEvent("on"+typ_zdarzenia,wykonaj_funkcje);
}

po prostu wykorzystujemy tą funkcję.
W ten oto sposób przypisujemy do zdarzenia załadowania strony funkcję „Zaladowano”. Funkcja ta naszemu polu textarea przypisuje w taki sam sposób funkcję „ograniczZnaki”. Zauważ, że tutaj ta funkcja nie posiada żadnych przekazywanych argumentów – niestety jest to wymóg, w ten sposób nadawana funkcja dla zdarzenia owych argumentów nie może posiadać. Więc można zadać sobie pytanie jak przekazać tej funkcji informacje, że to właśnie dla tego pola ma ona zadziałać ?
Popatrzmy więc na samą funkcję :

function ograniczZnaki()
{
var max = 20;
if (window.event && window.event.srcElement)
{
var obiekt = window.event.srcElement;
}
else
{
var obiekt = this;
}
if ( obiekt.value.length > max )
{
wpisz = obiekt.value.substring(0,max);
obiekt.value = wpisz;
}
var pozostalo = max-obiekt.value.length;
window.document.formularz_kontaktowy.licznik.value = "Pozostało : "+pozostalo+" znaków";
}

dla na przykład firefoxa aby określić pole, element dla którego wywołane zostało zdarzenie używamy po prostu znanego nam dobrze this, jednak znowu dla IE to nie zadziała – więc jak widać tutaj używamy window.event.srcElement.
Pozostałych elementów myślę już nie trzeba tłumaczyć.
Zapytacie pewnie czy to jakiś wymóg, konieczność takiego programowania skoro standardowe metody działają ? Generalnie nie zamierzam nikogo przekonywać do takiego czy innego „kodzenia”, ale warto znać różne metody określonych zadań żeby potem nie dziwić się dlaczego coś jest napisane tak, a nie inaczej. Poczytajcie sobie również : link.