3

我有两个带有相应两个按钮的文本框。我希望当 TextBox 具有焦点并且用户按 Enter 键时，事件处理程序后面的相应 Button 代码会像被单击一样执行。这是一个示例代码：

ASP:

<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";
}

但是当我在任何文本框中按 Enter 时，它总是执行Button1事件处理程序后面的代码。如果我单击按钮，它显然可以按预期工作。

我错过了什么？

4

3 回答 3

2

默认情况下，ASP 按钮呈现为提交按钮。当表单元素处于焦点时， Enter 的默认操作keypress（发生在 after keydown， before keyup）是提交表单。如果 HTML 表单包含多个提交按钮，则第一个是默认提交按钮。

将所有这些放在一起，当您keypress（记住，发生在 after keydown， before keyup）使用 Enter 键时，表单将通过默认提交按钮 ( Button1) 提交。

你有很多选择来解决这个问题。我建议使用一个input type="button"而不是一个 ASP 按钮，runat=server并从那里处理点击事件。

相关：具有不同按钮类型的 Asp 按钮

于 2012-07-13T23:47:13.937 回答
0

您可以通过将集合放在面板控件中并设置面板的 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>
于 2012-07-14T00:53:36.237 回答
0

将按钮设置UseSubmitBehavior为false最简单的解决方案。来自@jbabey 链接中的这个答案。

于 2012-07-16T17:29:37.643 回答