Getting ID attribute when event is triggered (elm v0.19.1) - events

Question

I have two div html elements (with contenteditable attribute) and I would like to get de id attribute of the element when keypress is triggered (onblur event as well).
This is my current code (it does not work, I have added any comments):
module Mytest exposing (main)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json
import Debug
type alias Model =
{ div1 : String
, div2 : String
}
initialModel : Model
initialModel =
{ div1 = "test1"
, div2 = "test2"
}
init : () -> ( Model, Cmd Msg )
init () =
( initialModel, Cmd.none )
view : Model -> Html Msg
view model =
div []
[ div [ id "div1", contenteditable True, onKeyPress KeyPressed ] [ text model.div1 ]
, div [ id "div2", contenteditable True, onKeyPress KeyPressed ] [ text model.div2 ]
]
type Msg
= KeyPressed Int
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
KeyPressed code ->
let
-- is there any way to use Debug.log without let block?
a = Debug.log "div1 event" code
in
-- keypressed on div1 should be update div1 field model
-- the same to div2
({model | div1 = String.fromInt code}, Cmd.none)
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program () Model Msg
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
onKeyPress : (Int -> msg) -> Attribute msg
onKeyPress tagger =
on "keypress" (Json.map tagger keyCode)
EDIT:
The following examples do not trigger the events in div contenteditable:
onInput : (String -> msg) -> Attribute msg
onInput tagger =
on "input" (Json.map tagger keyCode)
onBlur : (String -> msg) -> Attribute msg
onBlur tagger =
on "blur" (Json.map tagger targetValue)
onInput : (String -> msg) -> Attribute msg
onInput tagger =
stopPropagationOn "DOMCharacterDataModified" <|
Json.map alwaysStop (Json.map tagger (Debug.log "bbb" targetValue))
alwaysStop : a -> (a, Bool)
alwaysStop x =
(x, True)
However, in javascript it works: http://jsfiddle.net/MBags/

Answer 1

Unless there are additional constraints not evident from your example you could just add an extra argument to KeyPressed and pass the id through that:
type Msg
= KeyPressed String Int
view : Model -> Html Msg
view model =
div []
[ div [ id "div1", contenteditable True, onKeyPress (KeyPressed "div1") ] [ text model.div1 ]
, div [ id "div2", contenteditable True, onKeyPress (KeyPressed "div2") ] [ text model.div2 ]
]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
KeyPressed id code ->
-- Now you have the id
However, you probably shouldn't rely on string ids in the first place, since stringly typed data is very error-prone. Ideally you'd have separate Msg variants for each component:
type Msg
= Div1KeyPressed Int
| Div2KeyPressed Int
Or if you need a bit more dynamism you could use a custom Id type:
type Id
= Div1
| Div2
type Msg
= KeyPressed Id Int
view : Model -> Html Msg
view model =
div []
[ div [ contenteditable True, onKeyPress (KeyPressed Div1) ] [ text model.div1 ]
, div [ contenteditable True, onKeyPress (KeyPressed Div2) ] [ text model.div2 ]
]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
KeyPressed Div1 code ->
-- update model.div1
KeyPressed Div2 code ->
-- update model.div2