时间戳

首页 > 解决方案 > JQuery - 通过按回车键添加并关注下一个表单字段

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

问题描述

我正在尝试通过按 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>

标签： javascripthtmljquery

解决方案

  1. 您应该为您的重复元素提供类，因为在添加它们时，您最终会得到多个相同的 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>

推荐阅读