SCR20: A billentyűzet és más hardver specifikus funkciók használata
Alkalmazás
Minden szkriptet alkalmazó és funkciót működtető tartalom.
Ez a technika az alábbiakra vonatkozik:
- 2.1.1 teljesítési feltétel (Billentyűzet)
- 2.1.3 teljesítési feltétel (Billentyűzet (kivétel nélkül))
Leírás
A technika célja az eseménnyel társított szkript funkciót tartalmazó kód, illetve a billentyűzet-, és egéresemények együttes használatának szemléltetése. A billentyűzet és egér specifikus események együttes használata biztosítja azt, hogy a tartalom a hardverek széles skáláján megjelenítésre kerülhessen. Egy szkript például ugyanazt a műveletet hajthatja végre a billentyűk lenyomásakor, mint az egérrel való kattintáskor. Ez a technika túlmutat a billentyűzet használatával kapcsolatos teljesítési feltételen, mivel a billentyűzettel kapcsolatos feltételek mellett más hardverekkel kapcsolatos előírásokat is teljesíti.
A JavaScriptben általános elterjedt az onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit és onunload eseménykezelők használata. Bizonyos egér funkcióknak megvan a billentyűzeten végrehajtható megfelelője is (mint például az 'onmouseover' and 'onfocus'). Az egér eseménykezelőkkel megegyező funkciójú billentyűzet eseménykezelők biztosítása mindenképpen ajánlott.
Az alábbi táblázatban egymásnak megfelelő billentyűzet és egér eseménykezelők kerültek feltüntetésre.
| Használat.... | ...ezzel |
|---|---|
mousedown |
keydown |
mouseup |
keyup |
click [1] |
keypress [2] |
mouseover |
focus |
mouseout |
blur |
1Habár a klikkelés elsődleges
egér eseménykezelő, a legtöbb HTML és XHTML alapú
felhasználói program csak a vezérlés aktiválása után
hajtja végre az eseményt, attól függetlenül, hogy ezt az
egérrel vagy a billentyűzettel aktiválták. A gyakorlatban
azonban nincs szükség az esemény duplikálására. Ez a
vonás a teljesség kedvéért került itt említésre, mivel a
nem-HTML felhasználói programok is rendelkeznek ezzel a
tulajdonsággal.
2 Mivel a billentyű lenyomásával aktivált eseménykezelő bármelyik billentyűvel működésbe hozható, ezért a funkció esetében először azt kell ellenőrizni, hogy az Enter billentyű lenyomásra került-e az esemény kezelés megvalósítása előtt. Máskülönben az eseménykezelő minden egyes billentyű lenyomásakor működésbe lép, még akkor is, ha a tab billentyű elhagyja a vezérlőt, és ez általában nem hasznos tulajdonság.
Bizonyos egér specifikus funkciók (mint például a
dblclick és mousemove) nem
rendelkeznek a billentyűzettel végrehajtható
megfelelővel. Ez azt jelenti, hogy bizonyos funkciókat
egymástól függetlenül kell a különböző hardvereken
érvényesíteni (például számos billentyűkkel kezelhető
gombnak meg kell alkotni az egérrel is működtethető
változatát).
Példák
1. példa
Az alábbi példában egy képi hivatkozás szerepel, amely megváltozik, ha a felhasználó az egérrel rámutat. A billentyűzetet használók a képre való rálépéssel érhetik el ugyanezt a hatást.
Példa kód:
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>
2. példa
Az alábbi példában egy billentyűzettel aktiválható
kép szerepel. Az onclick egéresemény a
neki megfelelő onkeypress billentyűzet
eseménnyel került duplikálásra. A kép a
tabindex attribútum segítségével jelölhető
meg a billentyűzettel. Fontos, hogy a példában az Enter
billentyű lenyomását a
nextPage()funkcióval ellenőrizni kell,
mert ellenkező esetben a képre történő fókuszáláskor a
művelet minden billentyű lenyomására végrehajtásra
kerül, ami nem kívánatos viselkedés.
Példa kód:
<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif"
alt="Go to next page">
Megjegyzés: Ebben a példában tabindex kerül alkalmazásra a képi elemen. A módszer érvénytelensége ellenére ez egy olyan átmeneti technikát biztosít, amely hozzájárul a funkció működéséhez.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
Ellenőrzések
Folyamat
-
Keresse meg az összes interaktív funkciót.
-
Ellenőrizze, hogy az interaktív funkciók csak a billentyűzeten keresztül használhatók-e.
Elvárható eredmények
- A 2. pont igaz.