{{handle-keys}} helper

Ember helper for handling keyboard events directly in templates together with the {{on}} modifier.

It returns a KeyboardEvent handler which will call your function, if the key property of the event matches your target keys (e.g. "Escape" or "ArrowUp").

Main features:

- can handle multiple keys
- can call preventDefault/stopPropagation on matched events
- handles non-standard key identifiers for IE and Edge
- it's really tiny and has no dependencies

Installation

``
ember install ember-handle-keys-helper
`

Usage

A single key:

`handlebars

`

Multiple keys for the same handler:

`handlebars

`

With stopPropagation (it will only be called on a matched event):

`handlebars

`

Multiple handlers with multiple {{on}} modifiers:

`handlebars
{{on 'keydown' (handle-keys @play 'Enter')}}
{{on 'keydown' (handle-keys @pause 'Escape')}}
/>
`

Multiple handlers with a single {{on}} modifier and {{queue}} helper:

`handlebars
{{on
'keydown'
(queue
(handle-keys @play 'Enter')
(handle-keys @pause 'Escape')
(handle-keys @volumeUp 'ArrowUp')
(handle-keys @volumeDown 'ArrowDown')
(handle-keys 'ArrowUp' 'ArrowDown' preventDefault=true)
)
}}
/>
``

Compatibility

- Ember.js v3.20 or above
- Ember CLI v3.20 or above
- Node.js v12 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.