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

当该特定inputText发生验证错误时，我想将焦点放在JSF中的inputText字段上。我该如何实施？

我以为inputText上的validatorMessage可以做到这一点，但似乎没有。

最佳答案

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

关于javascript - 在验证错误时将焦点设置为inputText，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11205604/