在 onkeyup 模拟按钮点击答案

【问题标题】：Simulating a button click at onkeyup在 onkeyup 模拟按钮点击
【发布时间】：2012-07-13 23:24:29
【问题描述】：

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

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

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

我错过了什么？

【问题讨论】：

Enter以外的键呢？ Enter 将提交表单，asp:buttons 呈现为<input type="submit" .../>。由于Textbox1 是第一个，它正在获取提交事件。
@bhamlin 是的，它可以与其他键一起正常工作。
@bhamlin 所以解决方案是不使用 asp:buttons 而是使用 html 按钮？发布它，如果这是我会接受的最佳解决方案。
为什么只使用 TextBox 事件 onChange？不？ msdn.microsoft.com/en-us/library/…

标签： javascript asp.net events

【解决方案1】：

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

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

您有很多解决问题的方法。我建议使用input type="button" 而不是带有runat=server 的ASP 按钮并从那里处理点击事件。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

将按钮的UseSubmitBehavior 设置为false 是最简单的解决方案。来自this answer 中的link by @jbabey。

【讨论】：