关于keydown事件的jQuery聚焦到一个按钮似乎自动按下按钮？

Question

我有两个文本输入和一个按钮。

对于两个文本输入，我使用JQuery设置keydown事件，以便在按Enter键时将焦点切换到下一个元素。

所以：

• 在第一个输入中按Enter键应该聚焦到第二个输入。
• 在第二个输入中按Enter键应该对焦于按钮。

这里的演示代码：https://jsfiddle.net/5v8ze2m4/

看看会发生什么：

1. 单击第一个输入字段以在那里设置焦点。
2. 按Enter键。焦点将移动到第二个输入字段（正确）。
3. 再次按Enter键。焦点将移动到按钮（正确）但是按钮的onclick事件也会被触发（不正确）

请注意，这仅在我使用Enter键时发生。如果我在两个事件处理程序中将keyCode条件更改为40而不是13（对于光标键向下↓而不是Enter），它将按预期工作。

另外，另一个小问题：我自动聚焦到第一个似乎不起作用的输入元素。但这可能与JSFiddle有关。

Answer 1

您需要停止默认事件。使用event.preventDefault()方法在焦点到按钮功能中执行此操作，如下所示：

function FocusToButton(evt)
{
    evt.preventDefault();
    var keyCode = evt.keyCode || evt.which; 
    if (keyCode==13) $('#btn').focus();
}

将它添加到其他功能也是一个好主意。阅读更多关于preventDefault（）的here