Having trouble detecting user input events on contenteditable elements.

Learn
1

Here is a stackoverflow post I created earlier:

Any help is much appreciated!

2

onInput will get the string from target.value which does not exist for contenteditable input events. You may want to grab innerText for example instead:

https://ellie-app.com/7gjpRH8YG4sa1

onContentEditableInput : (String -> msg) -> Attribute msg
onContentEditableInput tagger =
    Html.Events.stopPropagationOn "input"
        (Json.map (\x -> ( x, True )) (Json.map tagger innerText))

innerText : Json.Decoder String
innerText =
  Json.at ["target", "innerText"] Json.string

This would not play well with the cursor though if you kept the model synchronized (it would jump to the start on each key down: https://ellie-app.com/7gjrkzvsSxVa1), Iā€™m not sure of the best way to resolve this as this is a tricky issue. One way would be to keep it unsynchronized instead and validate the change when the element loses focus:

https://ellie-app.com/7gjhKndk6Cga1

This may require to use Html.Keyed if you add/remove some other elements before the td one though as it could be reinitialized else.

There is the same kind of issues with React if you want to keep the element controlled:

1 Like
3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.