如何让 Elm-UI 元素响应按下 "Enter"

Question

我需要让我的应用程序在按下 Enter 时发送消息。我有一个像这样的元素：

Input.text [] { onChange = UpdateText, text = model.text, placeholder=Nothing }

如何在按下回车时提交？

注意：Q/A 从 Elm-Slack 复制以供查找。

Answer 1

Elm-UI docs .

中提到了这个

基本上，您定义一个函数，当按下 Enter 键时发送 msg，并将其嵌入到您的 view 函数中：

onEnter : msg -> Element.Attribute msg
onEnter msg =
    Element.htmlAttribute
        (Html.Events.on "keyup"
            (Decode.field "key" Decode.string
                |> Decode.andThen
                    (\key ->
                        if key == "Enter" then
                            Decode.succeed msg

                        else
                            Decode.fail "Not the enter key"
                    )
            )
        )

然后将其嵌入到您视图中元素的属性中：

Input.text
    [ onEnter EnterWasPressed ]
    { onChange = UpdateText
    , text = model.text
    , placeholder = Nothing
    }

Ellie Link（来自文档）：https://ellie-app.com/5X6jBKtxzdpa1

如何让 Elm-UI 元素响应按下 "Enter"

How Do I make an Elm-UI element respond to pressing "Enter"

elm

elm-ui