# Having trouble detecting user input events on contenteditable elements.

**URL:** <https://discourse.elm-lang.org/t/having-trouble-detecting-user-input-events-on-contenteditable-elements/4705>\
**Category:** Learn\
**Created:** [November 20, 2019, 10:19pm UTC](https://discourse.elm-lang.org/t/having-trouble-detecting-user-input-events-on-contenteditable-elements/4705 "2019-11-20T22:19:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![whage](https://avatars.discourse-cdn.com/v4/letter/w/b3f665/32.png) [@whage](https://discourse.elm-lang.org/u/whage)\
**Post date:** [November 20, 2019, 10:19pm UTC](https://discourse.elm-lang.org/t/having-trouble-detecting-user-input-events-on-contenteditable-elements/4705/1 "2019-11-20T22:19:34Z")

</div>

Here is a stackoverflow post I created earlier:

> <https://stackoverflow.com/questions/58949541/elm-oninput-event-handler-not-working-on-contenteditable-element>

Any help is much appreciated!

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [November 20, 2019, 10:57pm UTC](https://discourse.elm-lang.org/t/having-trouble-detecting-user-input-events-on-contenteditable-elements/4705/2 "2019-11-20T22:57:19Z")

</div>

`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](https://ellie-app.com/7gjpRH8YG4sa1)

```auto
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](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](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:

> <https://github.com/facebook/react/issues/2047>
>
> Hi.
> I don't think if this is really a bug nor if this can be fixed easily but this is an annoying...

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 30, 2019, 10:57pm UTC](https://discourse.elm-lang.org/t/having-trouble-detecting-user-input-events-on-contenteditable-elements/4705/3 "2019-11-30T22:57:21Z")

</div>

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