How to use Html.Events.on "keyup"?

[Tobias Hermann]

Hi,

I would like to change my model when a key on the keyboard is released.

Here is my minimal example. It uses the function onKeyUp from the documentation, but nothing happens when a key is pressed and released.

import Html exposing (Html, Attribute, div, text)

import Html.App exposing (beginnerProgram)

import Html.Events

import Json.Decode

main = beginnerProgram

           { model = 0

           , update = update

           , view = view

           }

type alias Model = Int

type Msg = SomeKeyDown

update : Msg -> Model -> Model

update msg model =

    case msg of

        SomeKeyDown -> model + 1

onKeyUp : (Int -> msg) -> Attribute msg

onKeyUp tagger =

  Html.Events.on "keyup" (Json.Decode.map tagger Html.Events.keyCode)

view : Model -> Html Msg

view model =

    div [ onKeyUp (always SomeKeyDown) ]

        [ toString model |> text ]

Why does it not work as intended?

Tobias

[Peter Damoc]

In order for the keyup event to fire you have to have focus on the element that binds it.

Here is your code sample modified a little bit to demonstrate this 

import Html exposing (Html, Attribute, div, text, button)

import Html.App exposing (beginnerProgram)

import Html.Events

import Json.Decode

main = beginnerProgram

           { model = 0

           , update = update

           , view = view

           }

type alias Model = Int

type Msg = SomeKeyDown

update : Msg -> Model -> Model

update msg model =

    case msg of

        SomeKeyDown -> model + 1

onKeyUp : (Int -> msg) -> Attribute msg

onKeyUp tagger =

  Html.Events.on "keyup" (Json.Decode.map tagger Html.Events.keyCode)

view : Model -> Html Msg

view model =

    div [ onKeyUp (always SomeKeyDown) ]

        [ toString model |> text 

        , button [] [text "click"]]  

If you load this in Elm try and you click on the white space.... it will not respond to key events but if you click on the button, it will start responding. 

Here is the same code with a slight modification: I put the button in a div that is parent to both the button and the div that has the event handler. Clicking on the button does nothing now because it gets the focus on a different branch. 

import Html exposing (Html, Attribute, div, text, button)

import Html.App exposing (beginnerProgram)

import Html.Events

import Json.Decode

main = beginnerProgram

           { model = 0

           , update = update

           , view = view

           }

type alias Model = Int

type Msg = SomeKeyDown

update : Msg -> Model -> Model

update msg model =

    case msg of

        SomeKeyDown -> model + 1

onKeyUp : (Int -> msg) -> Attribute msg

onKeyUp tagger =

  Html.Events.on "keyup" (Json.Decode.map tagger Html.Events.keyCode)

view : Model -> Html Msg

view model =

    div []

    [ div [ onKeyUp (always SomeKeyDown) ]

        [ toString model |> text] 

    , button [] [text "click"]]  

If you need reliable keyboard events that are not related to data entering (input fields), it is best to use the elm-lang/keyboard subscriptions. 

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

There is NO FATE, we are the creators.
blog: http://damoc.ro/

[Janis Voigtländer]

Why does it not work as intended?

I think because you are attaching this to the Html.text thing. So you would only get an event when that html element registers a keyup, which is not the same as the overall window/document registering a keyup.

​

--

[Tobias Hermann]

Ah OK. Thank you very much.