Question

假设我有一个包含许多组件的表单。我想从小组中发现失去焦点。因此，应忽略从一个输入到另一个输入在同一表单上的焦点。我该如何实现？

Answer 1

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

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

接下来，我们需要对onBlur事件的事件有效载荷进行解码，以查看target与relatedTarget是否不同（将获得焦点）。并报告更改。（请注意，此处我们通过路径data-group-id引用了"dataset", "groupId"）

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

在榆树中，我如何检测焦点是否会从一组元素中丢失？

1 个答案: