将焦点设置为验证错误时的输入文本

Set focus to inputText on validation error

本文关键字：输入 文本 错误 验证 焦点 设置      更新时间：2023-09-26

当特定inputText上存在验证错误时，我想在JSF中的inputText字段上设置焦点。我该如何实现？

我以为输入文本上的验证器消息会开箱即用，但似乎不是。

没有这样的默认行为。您需要自己实现它或使用第三方库来完成作业。基本上，在渲染响应期间，您需要遍历所有UIInput组件的提交表单，并找到其isValid()返回false的第一个组件，然后将其客户端 ID 存储在请求映射中，以便您可以将其打印为 JS 变量。

form.visitTree(VisitContext.createVisitContext(), new VisitCallback() {
    @Override
    public VisitResult visit(VisitContext context, UIComponent component) {
        if (component instanceof UIInput && !((UIInput) component).isValid()) {
            context.getFacesContext().getExternalContext().getRequestMap()
                .put("focus", component.getClientId(context.getFacesContext()));
            return VisitResult.COMPLETE;
        }
        return VisitResult.ACCEPT;
    }
});

然后，可以使用以下脚本设置焦点：

<h:outputScript target="body">
    var focus = '#{focus}';
    if (focus) {
        document.getElementById(focus).focus();
    }
</h:outputScript>

JSF 实用程序库 OmniFaces 有一个可重用的组件，即<o:highlight>（源代码在这里，展示演示在这里）。此外，它还在无效的输入上设置了一个样式类，以便您可以通过CSS指定不同的背景颜色。

相关文章：