Ovládače udalostí onKeyDown, onKeyPress, onKeyUp

28. listopadu 2000

•

Dnes si povieme niečo o ovládačoch udalostí, ktoré nám kontrolujú stav kláves. K napísaniu článku ma donútilo správanie sa ovládača udalostí onChange, ktorý je vyvolaný len vtedy, ak užívateľ zmení hodnotu formulárového prvku a presunie zameranie kurzora na nejaký iný prvok (napr. klávesou tab). Na stránkach však mnohokrát potrebujeme kontrolovať zmeny, ktoré sa odohrávajú pri stlačení kláves, a na to využijeme ovládače udalostí onKeyDown, onKeyPress a onKeyUp.

Na úvod si ukážeme ako funguje udalosť onChange v praxi. Pri zmene formulárového prvku <textarea> sa objaví správa o vyvolaní onChange, až vtedy, keď klikneme mimo <textarea>.

Ak by sme chceli kontrolovať hodnotu, ktorú píšeme do formulárového prvku počas jej editácíe, zistili by sme, že táto hodnota sa priradí formulárovému prvku až potom, keď klikneme mimo tento prvok.

Riešenie by mohlo byť také, že do predchádzajúceho príkladu doplníme metódu blur() a focus(). Teda opustíme editovaný prvok, zistíme jeho hodnotu a potom opäť vrátime zameranie na editovaný prvok. Vopred upozorňujem, že sa nejedná o príliš dobré riešenie, pretože focus() nám každých 100 ms bude zameriavať na náš prvok a nedovolí nám presunúť kurzor na iný prvok.

function Test(){
  document.forms.f.i.blur();
  window.status = document.forms.f.i.value;
  document.forms.f.i.focus();
  setTimeout(„Test()“,100);
  }

Definitívne riešenie prichádza s JavaScriptom verziou 1.2, ktorá obsahuje ovládače udalostí pre klávesy. Tu je popis, kedy je ktorá udalosť vyvolaná:

onKeyDown – vykoná JavaScript kód, keď sa vyskytne udalosť onKeyDown, teda ak užívateľ stlačil kláves Udalosť onKeyDown sa vždy vyskytne pred udalosťou KeyPress. Ak onKeyDown nenastane, nenastane ani udalosť onKeyPress. Udalosť onKeyDown predchádza udalosti onKeyPress spôsobenej držaním klávesy.
onKeyPress – vykoná JavaScript kód, keď sa vyskytne udalosť KeyPress, teda ak užívateľ stlačil alebo drží kláves. Udalosť onKeyPress nastane ihneď po udalosti onKeyDown len ak nastala udalosť onKeyDown. Udalosť onKeyPress opakovane nastáva, pokiaľ užívateľ neuvoľní kláves.
onKeyUp – vykoná JavaScript kód, keď sa vyskytne udalosť onKeyUp, teda ak užívateľ uvoľní kláves

Pripravil som aj malú ukážku všetkých troch udalostí. Nemá význam, aby som opisoval, čo sa stane pri jednom stlačení, alebo držaní klávesy. Treba si vyskúšať tento príklad. Spomeniem len, že pri stlačení klávesy nastane najprv udalosť onKeyDown (ale akú hodnotu máme v editovanom prvku zistíme až pri uvoľnení tejto klávesy – preto som pred výstup umiestnil znak ‚>‘ alebo ‚<‚, teda znak sa bude meniť, i keď sa nenačíta hodnota na vstupe). Potom nastáva udalosť onKeyPress (ak podržíme istú dobu túto kláves opätovne sa vyvolá onKeyPress) a nakoniec pri uvoľnení klávesy nastáva udalosť onKeyUp.

Na tomto príklade vidíte kedy nastávajú jednotlivé udalosti, ak by niekomu nebolo jasné čo sa kedy vykonáva, nech si v nastaveniach pre klávesnicu zmení prestávku pred opakovaním kláves na dlhú a rýchlosť opakovania kláves na malú. Alebo nech si JavaScript "pribrzdí" nejakým prázdnym cyklom napr. "for(var i=0 ; i<30000 ; i++);". Ešte malý rozdiel medzi IE a NN: onKeyDown sa vyvolá v IE pri tej istej udalosti ako onKeyPress (teda onKeyPress nie je v IE potrebný).

Aby sme si ukázali aj praktické využitie týchto udalostí, vytvoril som príklad, ktorého vstupom je textové pole pri ktorom budeme kontrolovať počet ostávajúcich znakov, ktoré môžeme napísať do tohto poľa (napr. ak by sme chceli odoslať SMSku). Alebo takýmto spôsobom môžeme vytvoriť stránku s výrobkami, pri ktorých bude cena a užívateľovi sa výsledná cena vypočíta ihneď po zadaní množstva daného výrobku. Takže nebude potrebné potvrdzovacie tlačítko pre prepočítanie výslednej ceny.

Zdrojový kód uvedeného príkladu:

Aby nám návštevníci našej stránky zbytočne neklikali (a neprepisovali:)) zvyšný počet znakov, stačí pre IE pridať do tagu <input> argument readonly. V NN som to vyriešil udalosťou onFocus, ktorá keď nastane spustí blur() a zruší zemaranie kurzora z tohto prvku. Pre dnešok je to už všetko...