Elm Html.Events - Pass input value to onBlur message

Question

I have this kind of input:

inputName player =
    input
        [ type_ "text"
        , onInput (Msgs.ChangeName player)
        , value player
        ]

which creates Msgs.ChangeName for every single character added to input.

I would prefer to update model after user leaves input but onBlur doesn't have any payload about input:

inputName player =
    input
        [ type_ "text"
        , onBlur (Msgs.ChangeName player)
        , value player
        ]

Above code doesn't compile ending with error:

The 1st entry has this type:

    Html (String -> Msg)

But the 2nd is:

    Html (Msg)

Hint: It looks like a function needs 1 more argument.

Answer 1

You can create a variation on the "blur" handler which pulls out target.value like this:

import Html.Events exposing (on, targetValue)
import Json.Decode as Json

onBlurWithTargetValue : (String -> msg) -> Attribute msg
onBlurWithTargetValue tagger =
    on "blur" (Json.map tagger targetValue)