Asp.net maintainScrollPositionOnPostBack 和表单验证失败

Question

我有一个很长的表格需要填写。我启用了 maintainScrollPositionOnPostBack，因为我有多个控件 hide/show 基于用户输入。

由于表单很长，我希望页面聚焦并滚动到导致验证失败的第一个控件，并且我启用了聚焦于验证失败选项。但是，似乎 maintainScrollPositionOnPostBack 覆盖了它（控件聚焦但不向上滚动）。

有什么解决方法吗？到目前为止我尝试过的一切都没有奏效。这是一个 asp.net 网络表单项目。

Answer 1

这是一个很好的问题，但要开始工作真的很棘手。但我设法获得了一个版本，您可以尝试并可能以此为基础。

MaintainScrollPositionOnPostback="true" 设置在表单提交和 window 加载上设置了一系列 javascript 事件，这些按照您所说的进行，"overwrite" 焦点由验证者设置。

所以我所做的是向所有验证器添加一个通用的 css-class，如下所示：

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="error" ErrorMessage="RequiredFieldValidator" SetFocusOnError="true"
    EnableClientScript="false" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>

然后我向 window.load 添加了另一个事件监听器（请注意，我们还需要保留 Asp.Net 添加的事件监听器，因此我们无法执行 windows.load = function...）：

<script>
    window.addEventListener("load", function () {
        var el = document.getElementsByClassName("error");
        if (el.length > 0) {
            window.location.hash = "#" + el[0].id;                
        }
    });        
</script>

在这里您可能会受益于 jQuery 使用能够支持更多的浏览器，但是 addEventListener 是 pretty well supported。

脚本搜索错误消息并通过它的 id 和锚点关注它。 Javascript 有 focus-method 但它是针对表单元素的，所以这就是这个解决方法的原因。

希望对您有所帮助！

Asp.net maintainScrollPositionOnPostBack 和表单验证失败

Asp.net maintainScrollPositionOnPostBack and forms validation fail

c#

asp.net

validation

maintainscrollpositionon