This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Convenience helpers for working with Keyboard with browser support
version 1.0.2
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.2
Committed At 2018-01-28 19:15:06 UTC
elm-lang/keyboard 1.0.1 <= v < 2.0.0 1.0.1
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1


Keyboard Extra Browser

This is a fork of ohanhi's super great keyboard package Keyboard-Extra. Why did I fork it? Keycodes vary between browsers, and ohanhi's Keyboard-Extra library basically assumes the Firefox browser environment. That wasnt working for a project of mine, so I had to figure out a solution. The solution I came to was making a Browser union type that must be used whenever mapping from keys to keycodes or vice versa. This solution is a pretty big divergence, and since my use case doesnt seem to be representative, I forked it instead of submitting a pull request. The browser keycode differences exist only for the semi-colon, minus, and equal sign keys anyway.

Below is the Keyboard Extra readme from Ohanhi's original Keyboard-Extra.

Keyboard Extra

Nice keyboard inputs in Elm.

It is quite tedious to find out the currently pressed down keys with just the Keyboard module, so this package aims to make it easier.

You can use Keyboard.Extra in two ways:

  1. The "Msg and Update" way, which has some setting up to do but has a bunch of ways to help you get the information you need.
  2. The "Plain Subscriptions" way, where you get subscriptions for keys' down and up events, and handle the rest on your own.

Full examples you can run and play with on Ellie

All of the examples are also in the example directory in the repository.

Msg and Update

If you use the "Msg and Update" way, you will get the most help, such as:

  • All keyboard keys are named values of the Key type, such as ArrowUp, CharA and Enter
  • You can find out whether e.g. Shift is pressed down when any kind of a Msg happens in your program
  • Arrow keys and WASD can be used as { x : Int, y : Int } or as a union type (e.g. South, NorthEast)
  • You can also get a full list of keys that are pressed down

When using Keyboard.Extra like this, it follows The Elm Architecture. Its model is a list of keys, and it has an update function and some subscriptions. Below are the necessary parts to wire things up. Once that is done, you can get useful information using the helper functions such as arrows and arrowsDirection.

Include the list of keys in your program's model

import Keyboard.Extra exposing (Key)

type alias Model =
    { pressedKeys : List Key
    -- ...

init : ( Model, Cmd Msg )
init =
    ( { pressedKeys = []
      -- ...
    , Cmd.none

Add the message type in your messages

type Msg
    = KeyMsg Keyboard.Extra.Msg
    -- ...

Include the subscriptions for the events to come through (remember to add them in your main too)

subscriptions : Model -> Sub Msg
subscriptions model =
        [ KeyMsg Keyboard.Extra.subscriptions
        -- ...

And finally, you can use update to have the list of keys be up to date

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        KeyMsg keyMsg ->
            ( { model | pressedKeys = Keyboard.Extra.update keyMsg model.pressedKeys }
            , Cmd.none
        -- ...

Now you can get all the information anywhere where you have access to the model, for example like so:

calculateSpeed : Model -> Float
calculateSpeed model =
        arrows =
            Keyboard.Extra.arrows model.pressedKeys
        model.currentSpeed + arrows.x

isShooting : Model -> Bool
isShooting model =
    List.member Space model.pressedKeys

Have fun! :)

PS. The Tracking Key Changes example example shows how to use updateWithKeyChange to find out exactly which key was pressed down / released on that update cycle.

Plain Subscriptions

With the "plain subscriptions" way, you get the bare minimum:

  • All keyboard keys are named values of the Key type, such as ArrowUp, CharA and Enter

Setting up is very straight-forward:

type Msg
    = KeyDown Key
    | KeyUp Key
    -- ...

subscriptions : Model -> Sub Msg
subscriptions model =
        [ Keyboard.Extra.downs KeyDown
        , KeyUp
        -- ...

There's an example for this, too: Plain Subscriptions