elm - 如何在 Elm 中监听 keypress 和 keydown 事件？

Question

我想监听 Elm 中的 keypress 和 keydown 事件。但如果我有以下内容，则只会监听 keydown 事件:

textarea
    [ onWithOptions "keypress" (Options False True) <| Json.Decode.map KeyPress keyCode
    , onWithOptions "keydown" (Options False True) <| Json.Decode.map KeyDown keyCode
    ] []

如果我将Options更改为不preventDefault，那么这两个事件都会被监听。但我需要 preventDefault 以免让 Tab 键改变焦点。

有什么方法可以在 Elm 中做到这一点吗？

Answer 1

在 Elm 19 中，要访问按下的键，您可以使用 Browser.Events这是 Elm Browser library 的一部分。如果您想捕获按下的键，您可以使用如下内容:

import Json.Decode as Decode

type Key
  = Character Char
  | Control String

subscriptions : Model -> Sub Msg
subscriptions model =
    Browser.Events.onKeyDown keyDecoder

keyDecoder : Decode.Decoder Msg
keyDecoder =
    Decode.map toKey (Decode.field "key" Decode.string)


toKey : String -> Msg
toKey string =
    case String.uncons string of
        Just ( char, "" ) ->
            PressedLetter char

        _ ->
            Control string

改编自here .