Question

我试图制作一个内容可编辑的标签，使用输入来更新模型。

我的代码如下，这是您可以在Ellie上使用的版本。

on＆＃34;模糊＆＃34;当您单击时，属性可以工作并更新模型。但我希望得到同样的更新＆＃39;按下输入时的功能。

view : Model -> Html Msg
view model =
    let
        attrs =
            [ contenteditable True
              --, on "blur" (Json.map UpdateTitle targetTextContent)
            , onInput2 UpdateTitle
            , onEnter EnterPressed
            , id "title"
            , class "title"
            ]
    in
        div []
            [ h1 attrs [ text model.existing ]
            , text "Click above to start editing. Blur to save the value. The aim is to capture an <enter> and interpret that as a blur, i.e. to save the value and blur the field"
            , p [] [ text <| "(" ++ model.existing ++ ")" ]
            ]


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


onInput2 : (String -> msg) -> Attribute msg
onInput2 msgCreator =
    on "input" (Json.map msgCreator targetTextContent)


onEnter : (Bool -> msg) -> Attribute msg
onEnter enterMsg =
    onWithOptions "keydown"
        { stopPropagation = False
        , preventDefault = False
        }
        (keyCode
            |> Json.andThen
                (\ch ->
                    let
                        _ =
                            Debug.log "on Enter" ch
                    in
                        Json.succeed (enterMsg <| ch == 13)
                )
        )

这段代码似乎正在更新模型，但DOM却搞砸了。例如，如果我在＆＃34; blast＆＃34;之后输入输入我看到了这个

我尝试切换到Html.Keyed并使用＆＃34; keydown＆＃34;但它没有任何区别或只是创造了不同的问题。

Answer 1

解决！关键点是使用Json.Decode.fail的过滤器函数，以便只有<enter>受到preventDefault的约束。有关这个想法，请参阅https://github.com/elm-lang/virtual-dom/issues/18#issuecomment-273403774。

view : Model -> Html Msg
view model =
    let
        attrs =
            [ contenteditable True
            , on "blur" (Json.map UpdateTitle targetTextContent)
            , onEnter EnterPressed
            , id "title"
            , class "title"
            ]
    in
        div []
            [ h1 attrs [ text model.existing ]
            , text "Click above to start editing. Blur to save the value. The aim is to capture an <enter> and interpret that as a blur, i.e. to save the value and blur the field"
            , p [] [ text <| "(" ++ model.existing ++ ")" ]
            ]


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


onEnter : msg -> Attribute msg
onEnter msg =
    let
        options =
            { defaultOptions | preventDefault = True }

        filterKey code =
            if code == 13 then
                Json.succeed msg
            else
                Json.fail "ignored input"

        decoder =
            Html.Events.keyCode
                |> Json.andThen filterKey
    in
        onWithOptions "keydown" options decoder

榆树：有条件的preventDefault（含contentEditable）

1 个答案: