https://github.com/derrickreimer/elm-keys

Advanced keyboard event bindings for Elm
https://github.com/derrickreimer/elm-keys

elm elm-lang keyboard-events

Last synced: 2 months ago
JSON representation

Advanced keyboard event bindings for Elm

• Host: GitHub
• URL: https://github.com/derrickreimer/elm-keys
• Owner: derrickreimer
• License: mit
• Created: 2018-07-06T18:20:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-10T19:36:15.000Z (about 6 years ago)
• Last Synced: 2024-09-30T05:23:00.570Z (3 months ago)
• Topics: elm, elm-lang, keyboard-events
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/derrickreimer/elm-keys/latest
• Size: 9.77 KB
• Stars: 11
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Keyboard Events for Elm

This library provides keyboard event functions, similar to the helpers provided in [Html.Events](http://package.elm-lang.org/packages/elm-lang/html/latest/Html-Events).

[![Travis build status](https://travis-ci.org/derrickreimer/elm-keys.svg?branch=master)](https://travis-ci.org/derrickreimer/elm-keys)

## Usage

The core event types this library supports are `keydown`, `keypress`, and `keyup`. Since it's often necessary to listen for multiple keyboard events on a given form control, the event functions accept a list of listener criteria that map to particular message constructor.

Suppose you have a `` and you would like to:

- Close the editor when the user presses `Esc`,

- Submit the value when `Meta + Enter` is pressed (on a Mac, the meta key is Command), and

- Prevent the default behavior when either of those keys are pressed.

Your program (partially) might look something like this:

```elm

import Keys exposing (Modifier(..), KeyboardEvent, preventDefault, onKeydown)

type Msg

    = MetaEnterPressed KeyboardEvent

    | EscPressed KeyboardEvent

view : Html Msg

view =

    textarea

        [ onKeydown preventDefault

            [ ( [ Meta ], Keys.enter, MetaEnterPressed )

            , ( [], Keys.esc, EscPressed )

            ]

        ]

        []

-- Other program details omitted

```

The first argument is a set of options (see [`Html.Events` options](http://package.elm-lang.org/packages/elm-lang/html/latest/Html-Events#Options)).

The second is a list of three-part tuples containing:

- a list of modifier keys,

- a key code, and

- a message constructor.