当用户在页面中完成某项操作,如何确定当用户回车时,触发哪个Button的Click事件,提交页面。本文做个简单的回答。
一:问题背景: 最近在忙个项目,其中有个需求就是查询功能的实现。当用户输入查询条件时,回车便执行查询,显示查询结果。
这个问题的解决是非常简单的,因为.net页面在回车时,会自动的提交页面,执行最左边的服务器控件Button的Click事件。现在需要解决的问题是当用户回车时,到底执行哪个Button的Click事件,完成查询功能。
这个问题也不难解决,只需在<body>标签中加入如下代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<body onkeydown="if(event.keyCode==13) $get('ButtonSearchOk').focus();">
<body>标签的onkeydown事件,决定了当按下回车时,谁将会获得焦点。
二:问题的引申
我由此想到了一个问题,简单一点,就是当页面中有两个输入框和两个Button时,如何当我完成某一个输入框的输入,回车就执行相应button的Click事件。
如下面的HTML
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
<asp:Label ID="LabelResult" runat="server"></asp:Label>
</div>
问题是当完成TextBox1的输入时,回车执行Button1的Click事件,当完成TextBox2的输入时,回车执行Button2的Click事件?我们可以参考body的Onkeydown事件,写下如下代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<script language="javascript" type="text/javascript">
function pageLoad(sender,args)
{
$get("TextBox2").onkeydown=textbox2_keydown;
$get("TextBox1").onkeydown=textbox1_keydown;
}
function textbox2_keydown()
{
if(event.keyCode=="13")
$get("Button2").focus();
}
function textbox1_keydown()
{
if(event.keyCode=="13")
$get("Button1").focus();
}
</script>
页面后台代码为:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
protected void Button1_Click(object sender, EventArgs e)
{
TextBox2.Text = "";
LabelResult.Text = TextBox1.Text;
}
protected void Button2_Click(object sender, EventArgs e)
{
TextBox1.Text = "";
LabelResult.Text = TextBox2.Text;
}
运行程序,发现实现了我所需要的功能。