Question

我想听听榆树的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才能不让标签键改变焦点。

任何方式在榆树中做到这一点？

Answer 1

我建议您使用elm-lang/keyboard。此软件包使用订阅，它非常易于使用。您可以同时订阅keydown和keyup。

针对您的具体情况： keydown事件的默认操作是触发按键事件。如果您阻止该默认行为，您将无法获得按键事件。

您可以阅读有关keydown事件here

的更多信息

也许你只需要使用keyup和keydown。

我希望它可以帮到你。

Answer 2

在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。

如何在Elm中收听keypress和keydown事件？

2 个答案: