15 KeyPress a panák v pohybu

Dnes si povíme jak udělat ovládání prvků pomocí kláves, tedy klávesnice. Budeme k tomu potřebovat událost onKeyPress. O událostech obecně jsme si už povídali zde. 

Událost onKeyPress dáme do tágu body, protože ten je stále aktivní.

<body onKeyPress="tuk()">

Nyní se provede funkce tuk() při sisku libovolné klávesy. Abychom identifikovali klávesu, která byla stisknuta, přidáme parametr event.

<body onKeyPress="tuk(event)">

Ve funci pak vytáhneme z eventu číslo zmáčknuté klavesy příkazem event.keyCode, nebo event.which. Jeden příkaz fungje na písmenka a druhý na ostatní klávesy jako např. šipky. 

function tuk (event) {
     var kodKlavesy=event.keyCode;
}

Pohyb panáčka

Pohyb obrázku na stisk kláves provedeme skze kaskádové styly. Nezapomeňte prvku ve stylech nastavit position:absolute.

 

<style>
    #panak {position:absolute}
</style>
...
<img src="/obrazek.jpg" id="panak">
...
function tuk (event) {
     var kodKlavesy=event.keyCode;
     var zleva = 0;
     if(kodKlavesy==100){
            zleva=zleva+50;
           document.getElementById("panak").style.left=zleva+"px";
     }
}
Kam dál?