假设我有一个包含多个组件的表单。我想检测从组中失去焦点的情况。因此,应忽略在同一表单上从一个输入聚焦到另一个输入的情况。我该如何实现这一点?
首先,我们希望能够使用某些属性为组内的每个可聚焦元素进行标记,这样当我们切换元素时就会知道我们是否在同一组中。这可以通过数据属性来实现。
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 构建的,因此有一些额外的代码。)
focusout
事件处理程序,而不是在每个输入框上单独附加blur
事件处理程序。 - glennslfocusout
可以导致更清晰的代码。 - Mark Bolusmjak