Skinney / keyboard-events / Keyboard.Events

Send message when a given key is pressed while a certain Html element has focus.

The functions in this namespace uses the keyboard event api, which is supported in most browsers (including IE11).

This package makes use of a Keyboard custom type from the ohanhi/Keyboard package, so you'll need that as a direct dependency.

Html Events


type Event
    = Keydown
    | Keyup
    | Keypress

When should a message be triggered? Keydown triggers when a key on your keyboard is pressed down. Keyup triggers when a key is release. Keypress only triggers if the key produces a character. If you want to trigger a message when the spacebar is pressed, use Keydown instead.

on : Event -> List ( Keyboard.Key, msg ) -> Html.Attribute msg

Listen for the corresponding event, and trigger the message that corresponds with the given Key. Works the same as Html.Events.on.

custom : Event -> { preventDefault : Basics.Bool, stopPropagation : Basics.Bool } -> List ( Keyboard.Key, msg ) -> Html.Attribute msg

Works like on, but allows you to specify if the default action or propogation should be stopped if a message is triggered.

customPerKey : Event -> List ( Keyboard.Key, { message : msg, preventDefault : Basics.Bool, stopPropagation : Basics.Bool } ) -> Html.Attribute msg

Works like custom, but allows you to specify if the default action or propogation should be stopped if a message is triggered for a specific Key.