javascript - JQuery on keydown 事件焦点到一个按钮似乎会自动按下按钮？

Question

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

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

所以:

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

var counter = 0;
function Foo() 
{
	$('#output').html(++counter); 
}

function FocusToLastName(evt)
{
	var keyCode = evt.keyCode || evt.which; 
  if (keyCode==13) $('#lastname').focus();
}

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

$('#firstname').on('keydown',FocusToLastName);
$('#lastname').on('keydown',FocusToButton);
$('#firstname').focus();

#output { color:#0f0; background:#80f; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='firstname' type='text'>
<input id='lastname' type='text'>
<button id='btn' onclick='Foo()'>OK</button>
<h1 id='output'></h1>

看看会发生什么:

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