HTML Elm 中的文本区域，其中按 Tab 键会添加 \t 并且不会改变焦点

Question

我知道如何在 Elm 中监听 Tab 键按下。我知道如何使用 onWithOptions:

来阻止焦点被改变

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

然后我可以在我的 update 函数中检查按下的 keyCode 是否为 9，代表一个制表符。现在的问题是 textarea 的默认行为不起作用。我输入的任何内容都不会出现在 textarea 中。很简单，我只需将我键入的任何内容添加到 model 并使 textarea 的值成为模型。现在我的光标有问题，更重要的是，剪贴板粘贴不起作用...

如何让选项卡在 Elm 中与 textareas 一起正常工作？通常，如果按下 tab 键，只调用 preventDefault() 似乎是有意义的。如何在 Elm 中有条件地调用 preventDefault()？

Answer 1

Elm 确实支持通过 Decoder 成功或失败的条件事件传播。只需 map 您要在 update 函数中响应的消息类型：

succeededIfTabKey : Int -> Decode.Decoder Int
succeededIfTabKey key =
    if key == 9 then
        Decode.succeed key
    else
        Decode.fail "non-tab"

tabPressed : Decode.Decoder Msg
tabPressed =
    Decode.andThen succeededIfTabKey keyCode
        |> Decode.map (always TabPressed)

然后将其用作输入元素的属性：

onWithOptions "keydown" { defaultOptions | preventDefault = True } tabPressed

这并不适用于所有情况。如果您希望某些 keydown 事件不 preventDefault()，而其他 keydown 事件不 preventDefault()，那么您就不走运了。

HTML Elm 中的文本区域，其中按 Tab 键会添加 \t 并且不会改变焦点

HTML textarea in Elm where pressing tab adds \t and doesn't change focus

elm