Az alábbi példa az onchange és az onkeydown esemény alkalmazását mutatja be. A felhasználó megadhatja
egy derékszögű háromszög befogóit és egy Javascript programocska kiszámítja a háromszög átfogóját.
A derékszögű háromszög egyik befogója:
A derékszögű háromszög másik befogója:
A háromszög átlója:
A megoldás elvileg egyszerű: ha valamelyik beviteli mező megváltozik, tehát ha bekövetkezik az onchange esemény, akkor le kell futnia
a számításnak. Ha a felhasználó megadta a kívánt értéket és az egérrel máshova kattint vagy a tabulátor billentyűt megnyomja, akkor a beviteli mező
elveszíti a fókuszt, lefut az onchange eseményhez rendelt Javascript függvény. Problémásabb eset viszont, ha az érték megadását követően
a felhasználó az enter billentyűt nyomja meg. Ezt a helyzetet a böngészők nem egyformán kezelik le. Az Internet Explorer, ha csak az
onchange eseményt figyeljük, nem csinál semmit, mivel az elem még nem veszítette el a fókuszt.
A Mozzilla Firefox viszont végrehajtja az onchange eseményhez tartozó kódot, hiszen a felhasználó nyílván azért nyomta meg az
enter billentyűt, mert befejezte az adat megadását.
A weboldal akkor tud minden böngészőben azonos módon működni, ha az enter billentyű megnyomása is le van kezelve. A példában az enter megnyomására
a fókusz átkerül a másik mezőre, ami a felhasználót is segíti (egy gombnyomást vagy kattintást megspórolunk neki) és a különböző böngészők is
egységesen kezelik az oldalt.
Tehát a példa HTML kódja az alábbi módon néz ki:
<div id="example1">
A derékszögű háromszög egyik befogója:
<input type="text" size="10" value="" id="leg1"
onchange="calculation();"
onkeydown="focusnext(event, 'leg2');"><br>
A derékszögű háromszög másik befogója:
<input type="text" size="10" value="" id="leg2"
onchange="calculation();"
onkeydown="focusnext(event, 'leg1');"><br>
A háromszög átlója:
<input type="text" size="10" value="" id="hypotenuse"
disabled><br>
</div>
function focusnext(keypusheddown, nextfield) {
var codeofkey;
if (window.event) {
codeofkey = window.event.keyCode;
} else {
codeofkey = keypusheddown.keyCode;
}
if (codeofkey == 13) {
document.getElementById(nextfield).focus();
}
}
Mint ahogy a példában is látszik, a billentyű események kezelése a többitől némileg eltérő módon történik,
hiszen ilyenkor nem csak az esemény bekövetkezését kell figyelni, hanem a lenyomott billentyűt is meg kell határoznunk.
Ez az Internet Explorer régi verzióiban a window.event objektumból olvasható ki, a többi böngészőben pedig
az eseményhez rendelt függvény paramétereként érhető el. (Az Explorer újabb verzióiban mindkét módszer működik.)