JavaScript billentyűlenyomás-kezelés

Témakörök

A modellezés során gyorsabb interakciót érhetünk el a billentyűzet segítségével, például a színtér bejárásánál, vagy bizonyos funkciók ki/be kapcsolásánál. A JavaScript környezet lehetőséget biztosít, hogy a billentyűzet gombok lenyomásakor, nyomva tartásakor és felengedésekor saját függvényünket meghívathassuk.

KeyDown

Jellemzői

A billentyűzeten lenyomott billentyű Unicode kódját kapjuk meg. Vagyis kis és nagybetűket nem különböztet meg, hiába nyomjuk a SHIFT billentyűt is!
Folyamatos nyomva tartáskor az esemény ismétlődik.
Minden billentyű lenyomását érzékeli, azokra külön eseményt aktivál.

Használata

Pl. az init() függvényben állítsuk be az ablakhoz az eseménykezelőt.

window.addEventListener( 'keydown', handleKeyDown );

Írjuk meg az eseménykezelő kódot.

function handleKeyDown( event ) {
    console.log( 'keydown: ' + event.keyCode );
}

Most csak a billentyűkódot írjuk ki a konzolra, de természetesen tetszőleges, a modellezést befolyásoló kódrészt elhelyezhetünk itt.

Dokumentáció (angol nyelven)

KeyUp

Jellemzői

A KeyDown párja, a billentyűzeten éppen felengedett billentyű Unicode kódját kapjuk meg. Vagyis kis és nagybetűket nem különböztet meg, hiába nyomjuk a SHIFT billentyűt is!
Minden billentyű lenyomását érzékeli, azokra külön eseményt aktivál.

Használata

Pl. az init() függvényben állítsuk be az ablakhoz az eseménykezelőt.

window.addEventListener( 'keyup', handleKeyUp );

Írjuk meg az eseménykezelő kódot.

function handleKeyUp( event ) {
    console.log( 'keyup: ' + event.keyCode );
}

Most csak a billentyűkódot írjuk ki a konzolra, de természetesen tetszőleges, a modellezést befolyásoló kódrészt elhelyezhetünk itt.

Dokumentáció (angol nyelven)

KeyPress

Jellemzői

A billentyűzeten lenyomott karakter Unicode kódját kapjuk meg. Vagyis pl. a kis- és nagybetűket megkülönbözteti!
Folyamatos nyomva tartáskor az esemény ismétlődik.
Nem minden billentyű lenyomását érzékeli! Pl. Shift, Alt, Caps Lock, stb. kimarad.
Böngésző inkompatibilitás miatt (Firefox) a visszaadott értéket különböző módon kell kezelni!

Használata

Pl. az init() függvényben állítsuk be az ablakhoz az eseménykezelőt.

window.addEventListener( 'keypress', handleKeyPress );

Írjuk meg az eseménykezelő kódot.

function handleKeyPress( event ) {
    // Firefox esetén nem megy az event.keyCode
    var char = event.which || event.keyCode;
    console.log( 'keypress: ' + char );
}

Most csak a billentyűkódot írjuk ki a konzolra, de természetesen tetszőleges, a modellezést befolyásoló kódrészt elhelyezhetünk itt.

Dokumentáció (angol nyelven)

Feldolgozási példa

A Three.js FirstPersonControls.js forráskódjából.

this.onKeyDown = function ( event ) {

    //event.preventDefault();

    switch ( event.keyCode ) {

        case 38: /*up*/
        case 87: /*W*/ this.moveForward = true; break;

        case 37: /*left*/
        case 65: /*A*/ this.moveLeft = true; break;

        case 40: /*down*/
        case 83: /*S*/ this.moveBackward = true; break;

        case 39: /*right*/
        case 68: /*D*/ this.moveRight = true; break;

        case 82: /*R*/ this.moveUp = true; break;
        case 70: /*F*/ this.moveDown = true; break;

    }

};

charCodeAt()

Az előző példákban a feldolgozás nehézségét az adja, hogy tudnunk kell a billentyűk számkódját. Ez természetesen megkereshető a dokumentációban. Áttekinthetőbb a kód, ha a sztring objektum charCodeAt() függvényét használjuk. Ez egy számot kap paraméterként, a sztring objektum indexét. Az indexelés 0-tól kezdődik, a sztring adott indexű karakterének kódját adja vissza.

function handleKeyDown( event ) {
    if( event.keyCode == '1'.charCodeAt( 0 ) ) {
        // ...
    }
    if( event.keyCode == '2'.charCodeAt( 0 ) ) {
        // ...
    }
}