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

Question

我试图通过按enter来添加新的输入字段。现在，当我按Enter键时，会添加一个新字段，但是焦点将直接转移到Submit按钮，而不是新添加的字段。我怎么才能阻止这一切？

此外，我如何增加一种“预防”，使一个新的领域不能添加，除非已经写入到当前的领域？

下面是它当前的工作方式：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的多个，这些id应该是唯一的。
2. 您的keypress事件以#items div为目标，当您请求将焦点放在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>

​