键盘事件的jQuery将集中在按钮上似乎会自动按下按钮

Question

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

对于两个文本输入，我设置了一个带有jQuery的keydown事件，以将焦点切换到按Enter的下一个元素。

so：

• 在第一个输入中按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（对于两个事件处理程序中的光标密钥＆darr; 而不是Enter），则可以按预期工作。

。

此外，另一个小问题：我会自动将重点放在似乎不起作用的第一个输入元素上。但这可能与jsfiddle有关。

Answer 1

您需要停止默认事件。使用event.preventDefault()方法将重点放在按钮函数的重点下：

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

也最好将其添加到其他功能中。在此处阅读有关dextdefault（）的更多信息