KeyPress Enter 上的下一個焦點輸入字段

Question

請幫助我，如何在按鍵輸入上制作下一個焦點文本字段。

我有這樣的 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 行，請關注第一行。

如果我按回車鍵，將焦點放在下一個字段旁邊。

提前致謝。

Answer 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>

KeyPress Enter 上的下一個焦點輸入字段

問題描述

1 個解決方案

解決方案1
0 已采納 2021-08-30 07:38:33

KeyPress Enter 上的下一個焦點輸入字段

問題描述

1 個解決方案

解決方案1 0 已采納 2021-08-30 07:38:33

解決方案1
0 已采納 2021-08-30 07:38:33