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

519 views
Skip to first unread message

Tobias Hermann

unread,
May 15, 2016, 11:09:25 AM5/15/16
to Elm Discuss
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

unread,
May 15, 2016, 11:36:13 AM5/15/16
to Elm Discuss
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

unread,
May 15, 2016, 11:39:05 AM5/15/16
to elm-d...@googlegroups.com

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

unread,
May 15, 2016, 12:18:32 PM5/15/16
to Elm Discuss
Ah OK. Thank you very much.
Reply all
Reply to author
Forward
0 new messages