elm - Elm 0.17 及更高版本中的键盘组合

Question

如何在我的 Elm 应用程序中构建键盘组合，例如。 “Shift + Alt + Enter”？您可以执行类似的操作来对按下的单个键(例如 Enter 键)使用react:

import Keyboard

type Msg
  = KeyDown Keyboard.KeyCode

type alias Model =
  ...

update msg model =
    case msg of
        KeyDown key ->
          handleKeyDown key model

subscriptions model =
    Sub.batch
        [ 
          Keyboard.downs KeyDown
        ]

handleKeyDown key model =
  case key of
    13 -> -- Enter key
      Debug.log "Other key"
      model

    _ -> -- Any other key
      Debug.log "Other key"
      model


view model =
    ...

但是如何对按下的多个键执行相同的操作呢？

Answer 1

您可以使用 pdoherty926 提到的 Keyboard.downs 以及 Set 来跟踪按下了哪些键。您还需要查看 Keyboard.ups 才能了解按键何时被释放。

这是一个工作示例:

import Html exposing (..)
import Html.App exposing (program)
import Keyboard exposing (..)
import Set exposing (Set)
import Char

main =
  program { init = (initialModel, Cmd.none), view = view, update = update, subscriptions = subscriptions }

initialModel =
  { keysDown = Set.empty
  }

view : Model -> Html Msg
view model =
  text <| toString <| Set.map Char.fromCode model.keysDown

type Msg
  = KeyDown KeyCode
  | KeyUp KeyCode

type alias Model =
  { keysDown : Set KeyCode
  }

update msg model =
  case msg of
    KeyDown key ->
      ({ model | keysDown = Set.insert key model.keysDown }, Cmd.none)
    KeyUp key ->
      ({ model | keysDown = Set.remove key model.keysDown }, Cmd.none)

subscriptions _ =
    Sub.batch
        [ Keyboard.downs KeyDown
        , Keyboard.ups KeyUp
        ]