|  | 网站首页 | .Net研究 | 
您现在的位置: 程序员之路 >> .Net研究 >> 语言技术区 >> 新手技术 >> 文章正文
赞助商链接
频 道 导 航
.Net研究频道栏目导航
相 关 文 章
实现在网页中按下回车键时,激发指定的按钮           
实现在网页中按下回车键时,激发指定的按钮
作者:iyond 文章来源:不详 更新时间:2007-5-10 11:02:41

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

[1] [2] [3] 下一页

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • .Net研究栏目导航
    网站频道导航