# Event listener other than onChange on a text input of elm-ui?

**URL:** <https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042>\
**Category:** Learn\
**Created:** [March 4, 2021, 6:43am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042 "2021-03-04T06:43:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JohnQWang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/johnqwang/32/3812_2.png) [@JohnQWang](https://discourse.elm-lang.org/u/JohnQWang)\
**Post date:** [March 4, 2021, 6:43am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/1 "2021-03-04T06:43:09Z")

</div>

Learning elm-ui I found the [Element.Input.text](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element-Input#text) can only use `onChange` event listener. This event fires on every keystrokes. That is actually the `onkeydown` on a raw `input` element. But I want the real `onChange` ie., fires only when I lost the focus or hit an enter key. How to do that with the `Element.Input.text` of elm-ui ?

---

<div class="post-metadata">

**Author:** ![JohnQWang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/johnqwang/32/3812_2.png) [@JohnQWang](https://discourse.elm-lang.org/u/JohnQWang)\
**Post date:** [March 4, 2021, 7:30am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/2 "2021-03-04T07:30:20Z")

</div>

I got a hint from [stackoverflow](https://stackoverflow.com/questions/57633716/how-do-i-make-an-elm-ui-element-respond-to-pressing-enter) which suggests to use [htmlAttribute](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#htmlAttribute) to add an `keyup` listener.

But using `Element.htmlAttribute` looks awkward. Not only it need a lot more code, you need also define a do-nothing Message tag for the original `onChange` of the `Element.Input.text` as it’s mandatory.

Is there a better way?

---

<div class="post-metadata">

**Author:** ![JohnQWang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/johnqwang/32/3812_2.png) [@JohnQWang](https://discourse.elm-lang.org/u/JohnQWang)\
**Post date:** [March 4, 2021, 9:24am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/3 "2021-03-04T09:24:24Z")

</div>

Just found there is a [feature-suggestion](https://github.com/mdgriffith/elm-ui/issues/96) closely related to my problem. Looks like using `htmlAttribute + Html.Events` is the only way to go for now.

---

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [March 4, 2021, 1:07pm UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/4 "2021-03-04T13:07:27Z")

</div>

Yeah, I seem to end up defining this just about every app, with and without elm-ui

```
onChange : (String -> msg) -> Attribute msg
onChange tagger =
  targetValue Json.Decode.string tagger
    |> Html.Events.on "change"
    |> htmlAttribute

targetValue : Json.Decode.Decoder a -> (a -> msg) -> Json.Decode.Decoder msg
targetValue decoder tagger =
  Json.Decode.map tagger
    (Json.Decode.at ["target", "value"] decoder)
```

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [March 4, 2021, 4:47pm UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/5 "2021-03-04T16:47:07Z")

</div>

I’m curious, what are your use cases for the `"change"` event?

---

<div class="post-metadata">

**Author:** ![JohnQWang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/johnqwang/32/3812_2.png) [@JohnQWang](https://discourse.elm-lang.org/u/JohnQWang)\
**Post date:** [March 5, 2021, 3:33am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/6 "2021-03-05T03:33:56Z")

</div>

Simple and good question! I just realized that the builtin `oninput` support of elm-ui is actually indeed more useful than `onchange`. A day ago I’m a bit annoyed and wondering why they don’t give onchange a direct support. Now I understand this is based on the nature of elm app. They’re trying help us to capture as much state-changes as possible(which is good). This give us fine-grained control over the ui and ease the data exchange with the backend. Please point out if my understanding is wrong(I’m learning)

In traditional html/css UI development, we care about `onchange` much more than `oninput`, because most of time that’s the point we get into act. Things are changed in elm and I’ll (happily) roll with it.

---

<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:** [March 15, 2021, 3:34am UTC](https://discourse.elm-lang.org/t/event-listener-other-than-onchange-on-a-text-input-of-elm-ui/7042/7 "2021-03-15T03:34:24Z")

</div>

Closed on March 15, 2021, 3:34am UTC

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