如何使 Elm-UI 元素响应按“Enter”

Question

当按下 Enter 时，我需要让我的应用程序发送一条消息。我有一个元素，如：

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

按下回车键时如何使其提交？

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

Answer 1

Elm-UI 文档中提到了这一点。

基本上，您定义了一个函数，该函数msg在按下 Enter 键时发送 a并将其嵌入到您的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
    }

艾莉链接（来自文档）：https : //ellie-app.com/5X6jBKtxzdpa1