Elm中的HTML文本区域，按tab键可添加\t但不会更改焦点

我知道如何在Elm中收听tab键按下。我知道如何使用onWithOptions阻止焦点更改：

然后，我可以在更新功能中检查按下的键代码是否为9，表示制表符。现在的问题是textarea的默认行为不起作用。我键入的任何内容都不会显示在文本区域中。很简单，我只需将我键入的内容添加到模型中，并将textarea的值作为模型。现在我有光标的问题，更重要的是，剪贴板粘贴不起作用

---

如何使选项卡与Elm中的文本区域正常工作？通常，只有在按下tab键时才调用preventDefault似乎是有意义的。如何在Elm中有条件地调用preventDefault？

Elm支持通过解码器进行条件事件传播，该解码器要么成功，要么失败。只需在更新功能中映射要响应的消息类型：

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

---

这并非适用于所有情况。如果您希望某些键控事件不为preventDefault，而其他键控事件为preventDefault，那么您就倒霉了。

请查看这类事件的解决方法。这并不理想，但在我们有条件事件传播之前，它应该能满足您的需要。我使用了一种类似的机制，但比@sentence在那期文章中所写的机制更简单。谢谢

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