Skip to content
AngularJS hotkeys
Branch: master
Clone or download
Latest commit 8179aef Apr 14, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore chore(git): ignore node_modules folder Apr 7, 2014
.npmignore chore(Hotkeys): publish package on npm packages Nov 18, 2014
.travis.yml chore(travis): remove npm install, travis run it automatically Jan 21, 2014
HotkeysSpec.js feat(Command): add Mac Command key support May 6, 2014
LICENSE Create LICENSE Apr 14, 2017 docs(preventDefault): prevent default browser action Apr 7, 2014
angular-hotkeys.js Merge pull request #11 from GuilhermeMedeiros/master Apr 7, 2016 feat(ParseKey): expose key aliases to module value Nov 18, 2014
angular-hotkeys.min.js feat(ParseKey): expose key aliases to module value Nov 18, 2014
bower.json chore(grunt): add minimized version Apr 7, 2014
example.html chore(Example): show custom key alias usage Nov 18, 2014
karma.conf.js chore(tests): add Opera and Firefox karma launchers May 6, 2014

AngularJS hotkeys Build status

Installation & setup

Add dependency to your angular module.

angular.module('myAwesomeApp', ['drahak.hotkeys']);

Hot keys expression & events

Use $hotkey service to register hotkey globally on window object. The $hotkey service is instance of HotKey using $window element as its scope. You can also use HotKey(Element) factory to observe hotkeys just in scope of the element.

$hotkey.bind('Ctrl + B', function(event) {
    // your handler here

Note the string expression in first argument. ParseKey service parses it into key codes array. As you can see it uses + sign to separate keys. There are some special expressions like Ctrl, Shift, Up, Left, Esc or even Escape. It's not case sensitive.

Ctrl + Shift + E
Control + escape + a
Shift + A
E +r


You can also use it as directive. Simply add hot key to hotkey attribute and action to invoke attribute. As in any AngularJS event you can use $event variable to access Event object.

<div hotkey="Esc" invoke="close($event)"></div>
<hotkey bind="Esc" invoke="close($event)"  />

Important note: this component does not prevent default browser events. Threfore it could block your hotkey. You can prevent it by calling event.preventDefault() where event is current browser event also available as $event in invoke and hotkey attributes.

Note: the hotkey directive can be used as element or attribute. If it's used as attribute, it will observe key events only on given element. Otherwise it will use $window element.

To define more events within single element pass object to hotkey or bind attribute. Note you can only pass function references. It's not possible to pass angular expression at the moment. Handler function only takes one parameter (event).

<div hotkey="{ 'Esc': close, 'Ctrl + C': close }"></div>
<hotkey bind="{ 'Esc': close, 'Ctrl + C': close }" />
You can’t perform that action at this time.