当文本框获得焦点时，如何通过按下回车键来触发按钮单击事件？

Question

当文本框获得焦点时，如何通过按下回车键来触发按钮单击事件？

3

我有一个表单，其中有几个提交按钮。我希望基于当前具有焦点的文本框，按下Enter键时触发相应按钮的点击事件。我可以使用以下代码指定一个按钮，在页面的body中添加onkeydown事件并检查Enter的keyCode。

<body onkeydown="if(event.keyCode==13){document.getElementById('btnSearch').click();}">
...
</body>

我假设这段代码可以被修改或调用一个函数来执行条件判断，以查看txtSearch或txtSubmit是否有焦点，并相应地指定btnSearch或btnSubmit，但我对JavaScript不熟悉。任何帮助和建议都将不胜感激！

- Starwfanatic

3个回答

1

第一个问题可能只是一个打字错误，但你需要在上面的代码中添加一个单引号并删除分号。

<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();
}

我已经改变了按键检测，以更好地适应其他浏览器。

- spinon

这在使用除了回车键之外的任何charCode时是有效的。当我使用回车键时，第一个按钮总是触发，就好像我仍然将其声明为页面上的默认按钮一样。我检查了自己是否设置了默认按钮，但并没有。有没有办法禁用默认按钮，以便它不会覆盖控制级别的脚本？ - undefined

你把代码从<body>标签中取出来了吗？如果你将它放在每个控件上，就不再需要那样做了。你能发布你的页面，看看发生了什么吗？ - undefined

0

我终于得到了我想要的结果。我需要使用一个函数来阻止默认的“Enter”按钮触发，另一个函数来触发正确按钮的点击事件。以下是所使用的脚本：

<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>

我在body的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');" />

- Starwfanatic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bgs264 · Accepted Answer

您可以使用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>

希望这能帮到您。

敬礼