在验证错误时将焦点设置为 inputText答案

【问题标题】：Set focus to inputText on validation error在验证错误时将焦点设置为 inputText
【发布时间】：2012-06-27 16:03:08
【问题描述】：

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

我认为 inputText 上的 validatorMessage 会立即执行此操作，但它似乎没有。

【问题讨论】：

【解决方案1】：

没有这样的默认行为。您需要自己实现它或使用 3rd 方库来完成这项工作。基本上，在渲染响应期间，您需要遍历所有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>（源代码here 和展示演示here）。此外，它还在无效输入上设置样式类，以便您可以通过 CSS 指定不同的背景颜色。

【讨论】：

感谢 BalusC 的解决方案。尝试实现您在上面详述的内容，但不幸的是 requiredMessage/validatorMessage 似乎在我的渲染响应中的代码到达之前被抛出。关于如何解决这个问题的任何想法？感谢您的帮助
正如我的回答中所说，您需要在渲染响应阶段执行该作业，而不是在调用操作阶段的某些命令按钮操作方法内。为此，您可以使用自定义组件（如 OmniFaces）或PhaseListener。
创建了一个 PhaseListener 并尝试在 afterPhase 方法和 beforePhase 方法中放置与您类似的代码，getPhaseId 方法也设置为返回 RENDER_RESPONSE。不幸的是，我的代码仅在页面加载时被命中，并且单击我的提交按钮时不会再次被点击。你知道我可能在哪里出错了吗？感谢您的宝贵时间。
应该在beforePhase()完成。绝对应该为每个请求调用它。也许您对问题的解释有误（即您没有检查该方法是否实际由调试器/记录器调用，而是检查了结果是否符合您的预期）。
啊，我的错，代码完全不同步，所以我的调试全错了。在我的代码中，我执行以下操作： FacesContext facesContext = event.getFacesContext(); UIComponent inputField = facesContext.getViewRoot();然后，当我在您提供给我的 if 条件下检查演员表时，它会给出 ClassCastException(UIPortletViewRoot to UIInput) 所以这似乎是我的问题。