在键盘按键抬起时模拟按钮点击

Question

我有两个文本框和对应的两个按钮。当一个文本框获得焦点并且用户按下回车键时，我希望执行相应的按钮代码后台事件处理程序，就像单击了它一样。以下是示例代码：

Aspx：

<asp:TextBox ID="TextBox1" runat="server" onkeyup="myfunction1(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button 1" usesubmitbehavior="false" />

<asp:TextBox ID="TextBox2" runat="server" onkeyup="myfunction2(event)"></asp:TextBox>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" usesubmitbehavior="false" />

<asp:Label ID="Label1" runat="server"></asp:Label>

<script type="text/javascript">
    function myfunction1(e) {
        if (e.keyCode == 13)
            document.getElementById('<%= Button1.ClientID %>').click();
    }
    function myfunction2(e) {
        if (e.keyCode == 13)
            document.getElementById('<%= Button2.ClientID %>').click();
    }
</script>

代码后台:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Button 1 was clicked";
}

protected void Button2_Click(object sender, EventArgs e)
{
    Label1.Text = "Button 2 was clicked";
}

但是，无论我在任何一个文本框中按下回车键，它总是执行Button1的代码事件处理程序。如果我点击按钮，它显然会像预期的那样工作。

我错过了什么？

- Clodoaldo Neto

---

除了回车键之外的键怎么办？回车键将提交表单，而asp：按钮呈现为<input type ="submit" .../>。由于“Textbox1”是第一个，因此它会获得提交事件。 - bhamlin

@bhamlin 是的，它与其他键一起正常工作。 - Clodoaldo Neto

@bhamlin 所以解决方案就是不使用 asp:buttons，而是使用 HTML buttons？发帖吧，如果这是最好的解决方案，我会接受的。 - Clodoaldo Neto

为什么你不只使用TextBox的onChange事件呢？这个链接可能会对你有所帮助：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textchanged.aspx - GTSouza

Answer 1

ASP按钮默认呈现为提交按钮。当表单元素处于焦点状态时，按Enter键的默认操作是提交表单，这发生在keydown之后，在keyup之前。如果HTML表单包含多个提交按钮，则第一个是默认提交按钮。

综合考虑，当您使用Enter键进行keypress（请记住，这发生在keydown之后，在keyup之前）时，表单将通过默认提交按钮（Button1）提交。

您有许多选项来解决问题。我建议使用带有runat=server的而不是ASP按钮，并从那里处理点击事件。

相关：Asp button with different button type

- jbabey

Answer 2

您可以通过将集合放置在面板控件中并设置面板的DefaultButton属性来实现您的要求。

示例：

<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1" Height="72px">

   <asp:TextBox ID="TextBox1" runat="server" onkeyup="myfunction1()"></asp:TextBox>
   <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button 1" />

   <asp:TextBox ID="TextBox2" runat="server" onkeyup="myfunction2()"></asp:TextBox>
   <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" />

</asp:Panel>

- HatSoft

Answer 3

将按钮的UseSubmitBehavior设置为false是最简单的解决方案。来自这个答案，作者是@jbabey。

- Clodoaldo Neto