javascript - 在验证错误时将焦点设置到 inputText

Question

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

我认为 inputText 上的 validatorMessage 会开箱即用，但它似乎不是。

Answer 1

没有这样的默认行为。您需要自己实现或使用第三方库来完成这项工作。基本上，在呈现响应期间，您需要遍历所有 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 指定不同的背景颜色等。