Ошибка ввода с пользовательским событием нажатия клавиш при попытке предотвратить использование по умолчанию

Question

Я понимаю, что где-то пропущен аргумент, или один из моих аргументов неверен, но, попробовав все, о чем я могу думать, я не уверен, что делать.

handleKeyDown : msg -> Attribute (Int -> Msg)
handleKeyDown message =
    custom "keydown" (Json.succeed { message = KeyPressed, stopPropagation = True, preventDefault = True })

view : Model -> Html Msg
view model =
    div []
        [ input
            [ handleKeyDown ]
            [ text "" ]
        ]

Ошибка

The 1st argument to `input` is not what I expect:

104|         [ input
105|>            [ handleKeyDown ]
106|             [ text "" ]

This argument is a list of type:

    List #(msg -> Attribute (Int -> Msg))#

But `input` needs the 1st argument to be:

    List #(Attribute msg)#

Answer 1

Здесь есть несколько проблем:

1. handleKeyDown ожидает аргумент message, который вы не используете и не передаете его. Поэтому тип msg -> Attribute ..., а не просто Attribute ..., как ожидалось.

2. KeyPressed, кажется, имеет полезную нагрузку типа Int. Поэтому возвращаемое значение Attribute (Int -> Msg), а не Attribute Msg.

Если вы хотите использовать аргумент message и получить keyCode из события, это должно работать:

handleKeyDown : (Int -> Msg) -> Html.Attribute Msg
handleKeyDown tag =
    let
        options message =
            { message = message
            , stopPropagation = True
            , preventDefault = True
            }

        decoder =
            Json.field "keyCode" Json.int
                |> Json.map tag
                |> Json.map options
    in
    Html.Events.custom "keydown" decoder

view : Model -> Html Msg
view model =
    div []
        [ input
            [ handleKeyDown KeyPressed ]
            [ text "" ]
        ]

Здесь handleKeyDown ожидает тег / сообщение с полезной нагрузкой Int. Внутренний декодер событий извлекает keyCode, оборачивает его в передаваемый тэг, затем оборачивает его в объект параметров с помощью preventDefault = True.

Но учтите, что keyCode устарело, и вы, вероятно, захотите использовать вместо него code или key, которые оба являются строками.