您的位置：首页 > 其它

实现在网页中按下回车键时，激发指定的按钮

2008-01-18 17:17 204 查看

有时候我们制作网页的时候，需要在输入框内输入完成后，直接敲回车键就可以激发提交事件。比如做一个搜索功能，想让用户在搜索框内输入完内容后，直接敲回车，就可以完成搜索。但是有时候ASP.NET并不能很好的完成这个功能。

这就需要用到Form标签的一个属性：DefaultButton。如果我们设置了这个属性的值，那么在这个表单中的输入框按回车时，会激发指定的按钮的提交事件。看一个示例：

WEB：

<form id="form1" runat="server" defaultbutton="btnSearch">
<div>
<asp:TextBox ID="tbSearch" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch1" runat="server" Text="搜索1" OnClick="OnSearch" />
<asp:Button ID="btnSearch" runat="server" Text="搜索" OnClick="OnSearch" />
</div>
</form>

后台代码：

protected void OnSearch(Object sender, EventArgs e)
{
Response.Write(((Button)sender).ID);
}

当我们在输入框内输入文本时，可以看到“搜索1”这个按钮获得了焦点。但是当我们按回车键提交后，页面输出的却是“搜索”这个按钮的ID。这样，我们就很轻松的实现了按回车键提交表单的功能。

引申一下，如果我把搜索功能放在了一个单独的用户控件中的话，defaultButton属性该设置成什么呢？还是直接写按钮的ID吗？这样是不行的，会报如下的错误：
The DefaultButton of 'form1' must be the ID of a control of type IButtonControl.

那我们该怎么办呢？有办法！

打开上面例子中成功的页面，查看源文件。Form标签是这样的：
<form name="form1" method="post" action="Default2.aspx" onkeypress="javascript :return WebForm_FireDefaultButton(event, 'btnSearch')" id="form1">

明白了吧，所谓的默认按钮，其实是用javascript来实现的。

javascript :return WebForm_FireDefaultButton(event, 'btnSearch')

其中，WebForm_FireDefaultButton就是激发事件的函数，而btnSearch就是onkeypress时，要提交的按钮

那么，WebForm_FireDefaultButton函数在哪里呢？在源文件中，还会看到下面的脚本链接：
<script src="/WebSite1/WebResource.axd?d=l9Q-eeVxG9n-Y-CuJPCABA2&t=633099018103904983" type="text/javascript"></script>

把这个脚本文件保存下来，打开。怎么样，看到WebForm_FireDefaultButton函数了吧？复制下来吧。

还有，如何得到放在用户控件里的按钮的ID呢？只需在源文件里找啦！

需要的东西都搜集完了，下面看一下示例吧：

default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function WebForm_FireDefaultButton(event, target) {
if (event.keyCode == 13 && !(event.srcElement && (event.srcElement.tagName.toLowerCase() == "textarea"))) {
var defaultButton = document.getElementById(target);
if (defaultButton && typeof(defaultButton.click) != "undefined") {
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
return true;
}

</script>
</head>
<body>
<form id="form1" runat="server" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'WebUserControl1_btnSearch')">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</form>
</body>
</html>

WebUserControl.ascx：