Ovládání webu klávesami v JavaScriptu

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);
}

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.

Klávesy Shift, Ctrl a Alt

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

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

• Keys.js
• Keyboard Shortcuts for Pagination
• Combokeys – snadná implementace klávesových zkratek pro JS akce