This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
We were not able to find the expected elm-package.json file at this tag.
Tag 1.0.1
Committed At 2018-09-18 20:23:06 UTC

Modules

    README

    Build Status

    elm-keyboard-event

    This module provides decoders for keyboard events with several useful features:

    • They preserve more information than just the keyCode.

    • They normalize some browser-specific quirks.

    • You can filter keyboard events right in the decoder (rather than sending all events to your update function).

    Background

    There are various ways to listen to keyboard events in Elm. If you want to get all keyboard events, you can subscribe using functions from Browser.Events. And, if you want to get keyboard events for specific HTML elements, you can use Html.Events.on.

    Each of those functions asks you to provide a Decoder msg to convert the keyboard event into a message your application can handle. To help you along the way, Html.Events has a handy keyCode decoder. You can use it to turn the keyboard event into a keycode -- which you can then map into a message your app understands.

    However, there is more information available in a keyboard event than just the keycode. So, we provide a decoder which gives you all the available information:

    type alias KeyboardEvent =
        { altKey : Bool
        , ctrlKey : Bool
        , key : Maybe String
        , keyCode : Key
        , metaKey : Bool
        , repeat : Bool
        , shiftKey : Bool
        }
    

    Even better, we:

    • normalize some browser-specific quirks, such as where to look for the keyCode (under "keyCode", "which" or "charCode")

    • turn the keyCode into a type-safe Key value.

    But wait, there's more! We also have a version of the keyboard event decoder which allows you to filter events right in the decoder. That way, you can prevent some events from reaching your update function at all, which can be useful in some scenarios.

    Examples

    To listen for keyboard events on HTML elements, you can do something like this:

    div
        [ on "keydown" <|
            Json.Decode.map HandleKeyboardEvent decodeKeyboardEvent
        , tabindex 0
        , id "id-for-auto-focus"
        , style [ ( "outline", "none" ) ]
        ]
        []
    

    We use thetabIndex attribute to make the element focusable, since an HTML element must be focusable in order to receive keyboard events. And, we provide an id in case we want to programmatically focus on the element, via Browser.Dom.focus.

    For complete examples, see:

    To listen for keyboard events globally, you can use functions from Browser.Events to subscribe to all keyboard events. For an example, see

    API

    For the detailed API, see the Elm package site, or the links to the right, if you're already there.

    Installation

    Try elm-package install Gizra/elm-keyboard-event

    Development

    Try something like:

    git clone https://github.com/Gizra/elm-keyboard-event
    cd elm-keyboard-event
    npm install
    npm test
    

    You can then find the compiled examples in the build folder.