如何在基于 Spring 的应用程序中为元素设置焦点答案

【问题标题】：how to set focus for elements in a spring based application如何在基于 Spring 的应用程序中为元素设置焦点
【发布时间】：2012-02-28 14:53:13
【问题描述】：

我有一个 spring 应用程序，我在其中验证自定义 spring 验证器类中的所有验证。

我的表单有近15个字段。如果最后一个字段有错误，如何设置焦点到那个元素。

弹簧标签是否支持这一点。有什么技术想法吗？目前我在字段本身附近显示我的错误消息。

【问题讨论】：

标签： forms validation user-interface spring-mvc custom-errors

【解决方案1】：

可以使用spring:bind标签来判断一个字段或整个模型对象是否有错误以及处理（提交）后对象的整体状态。

<spring:bind path="user.username">
    <input id="inputId" type="text" name="${status.expression}" value="${status.value}"/>
    <c:if test="${status.error}">
        <c:forEach items="${status.errorMessages}" var"error">
            <span class="field-error">${error}</span>
        </c:forEach>
        <script type="text/javascript">
            document.getElementById('inputId').focus();
        </script>
    </c:if>
</spring:bind>

注意：

status 变量由 spring:bind 标记公开。
javascript部分会在特定字段时聚焦元素存在验证错误。

【讨论】：

【解决方案2】：

您可以将autofocus 设置为所有有错误的字段，但您的浏览器只会自动聚焦（并滚动）到第一个字段。

<spring:bind path="someFieldName">
  <input type="text" name="someFieldName" value="${status.value}" ${status.error?'autofocus="autofocus"':''} />
</spring:bind>

您不能在此处使用 spring 的 <form:input />，因为它不适用于条件属性。

【讨论】：

【解决方案3】：

我用过这个：

    <spring:bind path="*">
        <c:if test="${status.error}"> 
            <script type="text/javascript">
                window.onload = function(){
                    document.getElementById('${status.errors.fieldErrors[0].field}').focus();
                };
            </script>  
        </c:if>
    </spring:bind>

如果出现错误，它将找到第一个 fieldError 及其 id 并将焦点设置在该元素上

忘了说它的美妙之处在于您不需要将这段代码放在每个输入旁边。每个jsp一次就够了

【讨论】：