{{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:

<Player {{on 'keydown' (handle-keys @pause 'Escape')}} />

Multiple keys for the same handler:

<Player {{on 'keydown' (handle-keys @pause 'Escape' 'Delete')}} />

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

<Player {{on 'keydown' (handle-keys @play 'Enter' stopPropagation=true)}} />

Multiple handlers with multiple {{on}} modifiers:

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

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

<Player
  {{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.