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

有时候我们制作网页的时候，需要在输入框内输入完成后，直接敲回车键就可以激发提交事件。比如做一个搜索功能，想让用户在搜索框内输入完内容后，直接敲回车，就可以完成搜索。但是有时候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&amp;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：

 

<% @ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl"  %>
< 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"   />

WebUserControl.ascx.cs

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  WebUserControl : System.Web.UI.UserControl
{
    protected void OnSearch(Object sender, EventArgs e)
    {
        Response.Write(((Button)sender).ID);
    }
}

在浏览器里打开Default.aspx，在输入框里输入一些文本，按回车，输出的应该是btnSearch

 

相关资料：http://www.vs2005.com/