KeyPress Enter 上的下一个焦点输入字段答案

【问题标题】：Next Focus Input Field on KeyPress EnterKeyPress Enter 上的下一个焦点输入字段
【发布时间】：2021-08-30 07:31:55
【问题描述】：

请帮助我，如何在按键输入时设置下一个焦点文本字段。

我有这样的 HTML 标记：

<html>  
  <head>  
       <title>Dynamically Add or Remove input fields in PHP with JQuery</title>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  </head>  
  <body>  
       <div class="container">  
            <br />  
            <br />  
            <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>  
            <div class="form-group">  
                 <form name="add_name" id="add_name">  
                      <div class="table-responsive">  
                           <table class="table table-bordered" id="dynamic_field">  
                                <tr>  
                                     <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>  
                                     <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                                </tr>  
                           </table>  
                           <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
                      </div>  
                 </form>  
            </div>  
       </div>  
  </body>  
</html>

这是脚本：

<script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });         
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"name.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>

如果我添加更多字段，然后输入的文本超过 1 行，请关注第一行。

如果我按下回车键，则将焦点放在下一个字段旁边。

提前致谢。

【问题讨论】：

标签： php jquery

【解决方案1】：

我希望这是你想要的。

我已添加此代码以在输入按下时进行焦点事件：

$(document).on("keypress",".name_list",function(e) {
  if (e.which == 13 ){
    $(this).closest("tr").next().find(".name_list").focus()
  }
});

对于点击添加按钮时的焦点部分：

$('#dynamic_field').find(".name_list").filter(function() { return $(this).val() == "" }).first().focus();

演示

$(document).ready(function() {
  var i = 1;
  $('#add').click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
    $('#dynamic_field').find(".name_list").filter(function() { return $(this).val() == "" }).first().focus();
  });
  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });
  
  $(document).on("keypress",".name_list",function(e) {
    if (e.which == 13 ){
      $(this).closest("tr").next().find(".name_list").focus()
    }
  });
  $('#submit').click(function() {
    $.ajax({
      url: "name.php",
      method: "POST",
      data: $('#add_name').serialize(),
      success: function(data) {
        alert(data);
        $('#add_name')[0].reset();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <br />
  <br />
  <h2 align="center">Dynamically Add or Remove input fields in PHP with JQuery</h2>
  <div class="form-group">
    <form name="add_name" id="add_name">
      <div class="table-responsive">
        <table class="table table-bordered" id="dynamic_field">
          <tr>
            <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
            <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
          </tr>
        </table>
        <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
      </div>
    </form>
  </div>
</div>

【讨论】：