Klávesové zkratky v JS

Ve webových aplikacích se občas hodí umožnit uživatelům některé funkce ovládat z klávesnice. Většinou by to neměl být jediný způsob, jak danou funkci použít, ale spíš usnadňující doplněk.

Odchytávání kláves

Zjišťovat, co uživatel stisk za klávesu, je většinou nejvhodnější přes document.onkeydown. Pro určení konkrétní klávesy se musí pro některé prohlížeče předat objekt event a sjednotit ho s window.event.

document.onkeydown = function(e) {
  var event = window.event || e;
  var kod = event.keyCode;
  alert(kod);
}

Kód poslední stisklé klávesy: (něco stiskněte)

Nyní stačí při požadovaném kódu provádět příslušnou akci.

Číselné kódy kláves

Často používané kódy kláves.

Kód Klávesa
27 Esc
37
39
38
40
116 F5
13 Enter
32 Space (mezerník)
8 Backspace
46 Delete
9 Tab

Klávesy Shift, Ctrl a Alt

Pro vytváření klávesových zkratek existují další speciální vlastnosti objektu event.

Kód Klávesa Vlastnost
16 Shift event.shiftKey
17 Ctrl event.metaKey || event.ctrlKey (sjednocení pro Mac OS)
18 Alt event.altKey

Pro odchytávání složených klávesových zkratek potom stačí něco jako:

if (event.keyCode == 83 && (event.metaKey || event.ctrlKey)) {
// Zkratka Ctrl + S
}

Tedy hlídat číslo klávesy a zároveň speciální klávesu.

Formulářová pole

Někdy je žádoucí, aby některé klávesové zkratky nefungovaly při psaní ve formuláři. Bylo by docela nepraktické, kdyby například ovládání fotogalerie šipkami blokovalo přesun kursoru v <input>u. Nebo při stisknutí klávesy S se provedla příslušná akce místo napsání znaku.

Řešení je zjišťovat cílový element. Opět se způsob liší napříč prohlížeči.

var target = event.srcElement || event.target;

Použití:

if (target.tagName == "INPUT") {
  // jsme v <input>u
}

Živá ukázka povolení zpracování zkratky Ctrl + S mimo formulářová políčka.

Přidávání více zkratek

Při používání více zkratek je vhodné vymyslet nějaký elegantnější postup. Třeba si vytvořit JS objekt se všemi zkratkami a jejich akcemi a ten předat funkci, která bude požadované funkce volat podle čísla klávesy.

var zkratky = {
  27 : function() {
    // ESC
  },
  37 : function() {
    // Left
  }
};
// Volání funkce při document.onkeydown
zkratky[kodKlavesy]();

Živá ukázka.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře