当根据文本框的焦点按下 Enter 键时，如何触发 Button Click 事件？
Posted
技术标签:
【中文标题】当根据文本框的焦点按下 Enter 键时，如何触发 Button Click 事件？【英文标题】：How can I fire a Button Click event when Enter Key is pressed based on what textbox has focus? 【发布时间】：2011-03-15 23:23:41 【问题描述】：我有一个带有多个提交按钮的表单。我希望根据当前具有焦点的文本框在按下 enter 时触发按钮的单击事件。我可以通过将 onkeydown 事件添加到页面正文并检查 Enter 的 keyCode 来使用下面的代码指定一个按钮
<body onkeydown="if(event.keyCode==13)document.getElementById('btnSearch').click();">
...
</body>
我假设可以修改此代码或调用函数来执行条件以查看 txtSearch 或 txtSubmit 是否具有焦点并相应地指定 btnSearch 或 btnSubmit，但我没有使用 javascript 的经验。
任何帮助/建议都会很棒！
【问题讨论】：
【参考方案1】：您可以使用 asp:Panel 控件来帮助您解决此问题。 asp:Panel 有“DefaultButton”，您可以在其中指定按钮的 ID。
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx
它可能不是你所需要的，但它一直足以满足我的需要。
<asp:Panel runat="server" DefaultButton="btnSearch">
<asp:TextBox id="txtSearch" runat="server" />
<asp:Button id="btnSearch" runat="server" text="Start search" />
</asp:Panel>
<asp:Panel runat="server" DefaultButton="btnSubmit">
....
<asp:Button id="btnSubmit" runat="server" text="Submit" />
</asp:Panel>
希望对你有所帮助。
问候
【讨论】：
感谢您的意见。它可以工作，但是我使用表格来组织我的文本框和按钮。我没有拆分我的表格或将面板添加到单个单元格，而是使用 spinon 的解决方案。我很可能会在未来的应用程序中使用这种方法，因为它更简单。 :) @Starwfanatic：您是否考虑过在布局中使用 div 而不是表格。它将为您提供渐进式渲染的好处，并允许您使用默认的 asp.net 功能。 我没有考虑过。我是 asp.net 的新手，所以我很欣赏这个建议。我会在以后的计划中对此进行研究。 我有上面的方法，但是当我点击进入页面时做了一些事情但没有返回结果。【参考方案2】：第一个问题可能只是拼写错误，但您需要在上面的代码中添加单引号并删除分号。
<body onkeydown="if(event.keyCode==13)document.getElementById('btnSearch').click();">
...
</body>
但我不认为捕获全局按键事件是最好的方法。我会将 onkeydown 添加到实际的表单控件中，这样您就不会只是拿起每个输入。此外，您可以在事件处理程序方法调用中指定一个参数来指示正在使用的文本框。
<input type="text" onkeydown="KeyDownEventHandler(event, 1);" />
那你只需要编写方法来处理所有的关键捕获事件：
function KeyDownEventHandler(e, box)
var charCode = (e.which) ? e.which : event.keyCode
if(charCode==13)
document.getElementById('btnSearch' + box).click();
我更改了键码检测以更好地与其他浏览器配合使用。
【讨论】：
如果我将其更改为使用除输入之外的任何字符代码，这将起作用。当我使用 enter 时，第一个按钮总是会触发，就好像我仍然将它声明为页面上的默认按钮一样。我检查以确保我没有在某处设置默认值，但我没有。有没有办法禁用默认按钮，使其不会覆盖控制级别脚本？ 你把代码从body标签里拿出来了吗？如果你把它放在每个控件上，你就不再需要它了。你能发布你的页面看看发生了什么吗？【参考方案3】：我终于得到了我想要的结果。我需要使用一个函数来阻止默认的“输入”按钮触发，并使用另一个函数来触发正确按钮的单击事件。这是使用的脚本：
<script type="text/javascript">
function KeyDownEventHandler(e, box)
var charCode = (e.which) ? e.which : event.keyCode
if (charCode == 13)
document.getElementById(box).click();
function DisableEnterKey()
if (event.keyCode == 13)
return false;
else
return true;
</script>
我从正文的 onkeydown 事件调用了 DisableEnterKey 函数，从文本框的 onkeydown 事件调用了 KeyDownEventHandler：
<body onkeydown="return DisableEnterKey()">
...
<input id="txtSearch" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnSearch');" />
...
<input id="txtAddEor" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnAddEor');" />
...
<input id="txtCategory" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnAddEor');" />
【讨论】：
以上是关于当根据文本框的焦点按下 Enter 键时，如何触发 Button Click 事件？的主要内容，如果未能解决你的问题，请参考以下文章