JQuery-按enter键添加并聚焦下一个表单字段

Question

我正试图通过按enter键添加新的输入字段。现在，当我按Enter键时，会添加一个新字段，但焦点会直接转移到Submit按钮，而不是新添加的字段。我该如何防止这种情况发生？

此外，我如何添加一种"；"预防"；这样就不能添加新字段，除非在当前字段中写入了某些内容？

以下是它目前的工作方式：JsFiddle

EDIT如果当前字段为空，我还想知道如何防止添加下一个字段：JsFiddle

$(document).ready(function() {
$("#items").keypress(function(e) {
if (e.which === 13) {
e.preventDefault();
$('#items').append('<div><input id="sub" type="text" name="subtask">' +
'<input type="button" value="delete" id="delete" /></div>');
$(this).next().focus();
}
});

$("body").on('click', "#delete", function(e) {
$(this).parent('div').remove();
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="">
<div id="items">
<input id="sub" type="text" name="subtask">
</div>
<input type="submit" value="submit">
</form>

Answer 1

1. 您应该将类赋予循环元素，因为添加它们时，您最终会得到多个相同的id，这些id应该是唯一的。

2. 您的keypress事件以#itemsdiv为目标，当您要求关注next()项目时，在按下事件键时，下一个项目是提交按钮。

3.您也可以将一个项目排除在焦点之外，只需赋予它tabindex属性并设置一个负值，例如-1(请参阅代码片段(

$(document).ready(function () {
$("#items").keypress(function(e) {
if (e.which === 13)
{
e.preventDefault();
$('#items').append('<div><input class="sub" type="text" name="subtask">' + 
'<input type="button" value="delete" class="delete" /></div>');
$(".sub").last().focus();
}

});

$("body").on('click', ".delete",function(e){
$(this).parent('div').remove();
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="">
<div id="items">
<input class="sub" type="text" name="subtask">
</div>
<input tabindex="-1" type="submit" value="submit">
</form>