在 Elm 中，如何检测一组元素是否会丢失焦点？答案

【问题标题】：In Elm, how can I detect if focus will be lost from a group of elements?在 Elm 中，如何检测一组元素是否会丢失焦点？
【发布时间】：2018-09-17 21:30:16
【问题描述】：

假设我有一个包含许多组件的表单。我想检测小组的注意力不集中。因此，应忽略同一表单上从 1 个输入到另一个输入的焦点。我怎样才能做到这一点？

【问题讨论】：

标签： json events dom elm

【解决方案1】：

首先，我们希望能够用一些属性标记组中的每个可聚焦元素，因此当我们切换元素时，我们会知道我们是否在同一个组中。这可以通过数据属性来实现。

groupIdAttribute groupId =
    Html.Attributes.attribute "data-group-id" groupId

接下来，我们需要解码onBlur 事件上的事件负载，以查看target 是否与relatedTarget 不同（将获得焦点）。并报告变化。（注意这里我们通过路径"dataset", "groupId"引用data-group-id）

decodeGroupIdChanged msg =
    Json.Decode.oneOf
        [ Json.Decode.map2
            (\a b ->
                if a /= b then
                    Just a

                else
                    Nothing
            )
            (Json.Decode.at [ "target", "dataset", "groupId" ] Json.Decode.string)
            (Json.Decode.at [ "relatedTarget", "dataset", "groupId" ] Json.Decode.string)
        , Json.Decode.at [ "target", "dataset", "groupId" ] Json.Decode.string
            |> Json.Decode.andThen (\a -> Json.Decode.succeed (Just a))
        ]
        |> Json.Decode.andThen
            (\maybeChanged ->
                case maybeChanged of
                    Just a ->
                        Json.Decode.succeed (msg a)

                    Nothing ->
                        Json.Decode.fail "no change"
            )

现在我们可以创建一个onGroupLoss 监听器：

onGroupFocusLoss msg =
    Html.Events.on "blur" (decodeGroupIdChanged msg)

然后像这样安装它：

input [onGroupFocusLoss GroupFocusLoss, groupIdAttribute "a"]

这是一个例子（注意它是用 elm-ui 构建的，所以有一些额外的代码。）

https://ellie-app.com/3nkBCXJqjQTa1

【讨论】：

您可以在祖先上使用focusout 处理程序，而不是在每个输入上附加blur 处理程序。
有趣。这开辟了其他可能的方法，但我不确定最好的选择是什么。我所拥有的是最灵活的（例如，假设您有一个控件弹出一个不属于同一棵树的子控件，并且您希望在控件组通常失去焦点时触发保存）。如果我们知道所有项目都在同一个层次结构中，focusout 可能会导致代码更简洁。
不会有不同的组 ID 吗？
我可以想象一个不会出现这种情况的 UI。这并不意味着它是一个很棒的用户界面。所以我的解决方案更普遍。您的解决方案是对部分用例的更好解决方案（可能是也可能不是 UI 设计的更好示例）。我必须考虑一下。
不确定我是否理解，因为它似乎只是比较组 ID，而不是附加了哪个模糊处理程序。除非您的意思是他们可以在没有模糊处理程序的情况下拥有组 ID，但是对于任何 relatedTarget 来说这不是一种可能性吗？不过，这两种方式可能都无关紧要:)