JQuery - 通过按回车键添加并关注下一个表单字段

Question

我正在尝试通过按 Enter 来添加新的输入字段。现在，当我按下 Enter 时，会添加一个新字段，但焦点会直接转移到提交按钮，而不是新添加的字段。我怎样才能防止这种情况发生？

另外，我怎样才能添加一种“预防”，以便无法添加新字段，除非已将某些内容写入当前字段？

这是它目前的工作方式：JsFiddle

编辑 如果当前字段为空，我还弄清楚如何防止添加下一个字段：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，它们应该是唯一的。

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

3.你也可以排除一个item被聚焦，只要给它tabindex属性并设置一个负值，例如-1（见sn-p）

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