ASP.NET 1.1 Panel Enter Key Handler

• 下载演示 - 13.4 KB
• 下载源码 - 1.04 KB

引言

假设你有一个网页，上面有一个简单的表单，例如，用于向你发送反馈。很好，这听起来很直观...所以你现在创建了你的表单，而且一切运行良好。然而，当最终用户来使用该表单时，他/她输入他们的“名字”、“姓氏”、“电子邮件地址”....以及他们的“反馈信息”，然后点击“回车”（换行），而不是收到一条关于向你发送反馈的可爱感谢消息，用户会得到一个新页面，上面有很多搜索结果！

发生了什么事？嗯...在同一页面的顶部有一个搜索控件，当用户点击“回车”键时，它触发了“搜索”按钮，而不是你表单上的“提交”按钮。

本文（和代码）将向你展示解决该问题的最佳方案，并允许你处理一个页面上的多个表单，并且在按下“回车”键时仍然触发正确的按钮。

背景

当我第一次遇到这个问题时，我的第一反应是在网上搜索（就像每个人一样）。我找到了很多不同的解决方案。

我能找到的最佳方案是将一个onkeypress事件附加到输入字段，以捕获event.keycode == 13（如果使用Firefox，则为event.which），附注：13是回车键的代码。

虽然这确实有效，但这意味着需要在页面上的每个输入字段中添加该事件，这也意味着必须为每个服务器控件添加Attributes.Add()。

然后，我发现了一个突破：在 ASP.NET 2.0 中，标准的 asp:panel 控件有一个名为“DefaultButton”的属性。你所要做的就是将你的表单包装在一个Panel中，并设置该表单的默认按钮。现在，回车键就可以很好地工作了。

结束...！？

嗯，几乎。遗憾的是，我正在开发的应用程序不是 .NET 2.0；这就是我写这篇文章的原因。此代码适用于所有 .NET 1.1 应用程序，即使你根本不使用 ASP.NET，你仍然可以在用记事本编辑的常规 HTML 页面中使用该代码！

该代码的基础是 ASP.NET 2.0 的 Panel。

使用代码

我提供的代码用于 ASP.NET 1.1。

将 FormPanel.cs 文件复制到你的项目中（你可能需要更改命名空间），然后在你的页面上注册控件。将默认按钮设置为你希望在表单中按下回车键时触发的按钮。

<%@ Page language="c#" Codebehind="Default.aspx.cs" 
  AutoEventWireup="false" Inherits="FormPanel.Default" %>
<%@ Register TagPrefix="custom" 
  Namespace="FormPanel.Controls" 
  Assembly="FormPanel" %>
...
<custom:FPanel DefaultButton="btnSearch" runat="server">
    //Your form here
</custom:FPanel>
...

如果你不使用 ASP.NET，那么你可以使用此控件创建的 JavaScript 来做同样的事情，并使用DIV作为你的 panel（这就是asp:panel最终呈现的内容！）。

<script>
function FormPanel_FireDefaultButton(event, target) {
    if ((event.keyCode == 13 || event.which == 13) && !(event.srcElement && 
        (event.srcElement.tagName.toLowerCase() == 'textarea'))) 
    {
        var defaultButton = document.getElementById(target);
        if (defaultButton == 'undefined') defaultButton = document.all[target]; 

        if (defaultButton && typeof(defaultButton.click) != 'undefined') 
        {
            defaultButton.click();
            event.cancelBubble = true;
            if (event.stopPropagation) event.stopPropagation();
            return false;
        }
    }
    return true;
}
</script>


<div onkeypress="javascript:return FormPanel_FireDefaultButton(event,'btnSubmit')">
    //Your form here
<div>

关注点

所有输入字段都必须位于 panel 内部，并且相关表单必须“处于焦点”才能触发正确的回车键事件。但是，实际按钮可以在页面的任何位置。

在我将这个组合在一起时，我需要搜索页面以找到正确的按钮控件。Page.FindControl()不是递归的（即，不会在控件内的控件内找到控件等）。此代码还包括一个用于搜索所有控件的好方法

private Control FindControl(Control control, string id)
{
    if (_ctl != null) return _ctl;
    IEnumerator iEnum =  control.Controls.GetEnumerator(); 
    iEnum.Reset();
    while (iEnum.MoveNext())
    {
        if (_ctl != null) break;
        if (((Control)iEnum.Current).ID == id)
        {
            _ctl = ((Control)iEnum.Current);            
            break;
        }
        FindControl(((Control)iEnum.Current),id);
    }
    return _ctl;
}

希望这有帮助。

历史

至今没有。